ajax, pjaxで変化させた要素を注視させるべく背景色をアニメーションさせる

タイトルでは、ajax, pjaxと入れましたが、別に普通にjQueryで変化させたい所には適用できるかと思います。

いつもながら、意味がよくわからないタイトルですが、つまりは、

ajaxやpjaxさせた時に、fadeIn()などのエフェクトを付けて、そこが変わりましたよと言うのはよくある例ですけれども、例えば何かしらのアクションがあって、その部分だけが変化しましたというのを知らせたい時に、背景の色を変化させることによって変わった部分はここだと知らせるためのやり方と言うわけです。

はい、説明してもよくわかりません(笑)
ものすごく簡単に言うと、Stack overflowのアレです(笑)

Stack overflowのアレがどのようにして実装されているのかは知りませんが、それっぽいのを作るためにどうするかを説明したいと思います。

準備

背景を変化させたい要素のcssには、

みたいな感じで、アニメーションさせる準備をしておきます。
これがないと、単純に色がパッと変わって元に戻るだけ…だと思います(試してない(笑)

次に変化させたい色を準備しておきます。

実装方法

まず、どのようにして色を変化させて元に戻すかを考えてみたわけですが、一定の時間が経過したら追加したclassを削除すると言うのでイケるんじゃなかろうかと思ったわけです。
classを追加するのは、addClass()でいけるんですけれども、消すのにどうやってやろうかと色々思案していました。そういう流れから思いつくのはsetTimeout()なわけですが、数秒後にclassを追加するだったら簡単にできるんですけれども、消すとなったら、どうやってやるかなぁと思っていたりしたわけです。

例えば、最初からcssでアニメーションを作って、最初は例えばbackground:#fff;で、80%ぐらいの所で目的の色になり、100%で元の白に戻すというようなキーフレームでも良いかと思ったんですけれども、ずっとアニメーションされてるとアレですし、色々書くのが面倒臭いってことで、以下のようにしてみました。

まずaddClass()で、目的のセレクタに色を付けます。目的のclassは予めtransitionが設定してある前提なので、勝手に追加したclassの色に変化していきます。その後、1秒経過したら追加したclassを消すキューを作っておき、実行させます。

こうすることで、指定されたセレクタはアニメーションして背景色が変わり、元の状態に戻るという感じです。もし、最初から目的のセレクタに何かしらのclassが何もない場合は、除去するclassを指定しなくても、removeClass()で良いと思います。

pjaxで実装する場合はどうすればよいかですが、例えば、

このようにして、pjax:completeのように、完了を待って実行すればよいのではないかと思います。これらは従来のajaxについても同様のことが言えるかと思います。

この機能はギターを弾き語れ!に現在、実装しています。