attr()メソッドでクラスを変更する時にアニメーションを伴わせる

以下のコードでユーザーがテキストに入力して、入力の有無をバリデーションするために、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とテキストを変更し、これに動きをつけるうまい方法はありますでしょうか？

よろしくお願い申し上げます。

HTML
1<div id="titleval" class="tips-before">
2       <input  type="text" name="name" id="title" placeholder="タイトル">
3       <span>入力必須</span>
4       </div>
5
6CSS
7

Javascript
1$(function(){
2$('#title').blur(function(){
3var textContent=$(this).val();
4
5if (!textContent=="") {
6  $('#titleval').attr("class","tips-after");
7  $('#titleval span').text("OK");
8}
9
10if (textContent=="") {
11  $('#titleval').attr("class","tips-before");
12  $('#titleval span').text("入力必須");
13}
14})
15});

退会済みユーザー

2017/03/28 10:12

addClass() ではなく attr() を使う意図はなんですか？

pegy

2017/03/28 10:35

深く違いはぞんじあげず恐縮ですが、テキストボックスの変化に対してaddClassの場合はケースに応じてaddとromoveが必要であると考えていたため、単純びattrで属性を上書できるのではと考えました。

pegy

2017/03/28 10:35

申し遅れましたが、コメントいただき、誠にありがとうございます。

行動規範の内容に同意します

回答1件

ベストアンサー

ご質問を理解しているか自信がないのですが、CSSで対応するのではダメなのでしょうか？

CSS3 仕様の一部である CSS transitions は、CSS プロパティが変化する際のアニメーションスピードの操作法を提供します。アニメーションによる変化は即座に反映されるのではなく、指定された時間の間に渡ってプロパティが変化します。例えば、ある要素の前景色を白色から黒色に変更する場合、通常は即座に前景色が替わります。transitions が有効な CSS では、指定した時間をかけて、またカスタマイズした加速度曲線に従って変化していきます。

CSS transition の使用 - CSS | MDN

投稿2017/03/28 11:07

Lhankor_Mhy

総合スコア36057

pegy

2017/03/28 16:09

ご回答をいただき、ありがとうございます。結果的におっしゃる方法で簡単にCSSで実装することができました。一方で勉強のためにもしご存知であればご教示いただきたいのですが、提示したようなjqueryコードで実装できなのはなぜ、またはどのようなattrの変化とfadeInを組み合わせれば実装可能なのでしょうか？お手数、ご迷惑を承知ですが、何卒よろしくお願い申し上げます。