質問: 以下のコードでユーザーがテキストに入力して、入力の有無をバリデーションするために、blurのタイミングでdiv classのidを変更するとともに、spanの中のテキスト内容を変更する仕組みを作成しております。CSSは多いため割愛いたしますが、「入力必須」と「OK」を囲む吹き出しのデザインでtips-beforeでは赤色で「入力必須」が表示されており、tips-afterでは緑色でOKが表示されるとご理解ください。 (ご質問) tips-beforeとtips-afterと入れ替わるたびに吹き出しをanimationでfadeinさせて動きをつけてあげたいのですが、 if (!textContent=="") { $('#titleval').attr("class","tips-after"); $('#titleval span').text("OK"); $('.tips-after').fadeIn('slow'); } としても、動きはついてはくれません。 appendToで構造等は変えたくないため、attrでclass属性をスイッチすることでcssとテキストを変更し、これに動きをつけるうまい方法はありますでしょうか? よろしくお願い申し上げます。 ``` 入力必須 CSS ``` ``` $(function(){ $('#title').blur(function(){ var textContent=$(this).val(); if (!textContent=="") { $('#titleval').attr("class","tips-after"); $('#titleval span').text("OK"); } if (textContent=="") { $('#titleval').attr("class","tips-before"); $('#titleval span').text("入力必須"); } }) }); ```
回答: ご質問を理解しているか自信がないのですが、CSSで対応するのではダメなのでしょうか? > > CSS3 仕様の一部である CSS transitions は、CSS プロパティが変化する際のアニメーションスピードの操作法を提供します。アニメーションによる変化は即座に反映されるのではなく、指定された時間の間に渡ってプロパティが変化します。例えば、ある要素の前景色を白色から黒色に変更する場合、通常は即座に前景色が替わります。transitions が有効な CSS では、指定した時間をかけて、またカスタマイズした加速度曲線に従って変化していきます。 > > CSS transition の使用 - CSS | MDN > > >