Jquery slideDownが完了してから動作させたい

2022年8月16日

最近はJqueryを装飾に使用することが何かと多いです。
ブラウザ側だけで動作するので、手軽なことも理由のひとつです。

ところが、最近このようなことがありました。
「動作タイミングがおかしい」

どういうことかというと、Jqueryのスライドダウン時に別の動作を組み合わせていた時の話です。
①スライドダウン処理　②別の処理の順番で処理されることを期待していました。

でも実際には同時に処理されました。

今回、これを何とかすることにしました。

現象は次の通りです

Jqueryスライドダウン後に処理されることを期待しているのですが、実際には同時に処理されています。

サンプルは、スライドダウン時に背景色を変更しています。
スライドダウン完了後に背景色を変えたいのですが、実際には同タイミングで処理されています。

[sample]現象の発生するサンプルはこちら

現象が発生するソース

原因はJqueryの動作特性

Jqueryのは前の処理を待たずに次の処理ができます。
厳密にいうと、SlideDown処理はゆっくり動作するため、終了までタイムラグがあります。
ところが、次の処理はタイムラグを待たずに実行されます。

そのため、同時処理されているように見えるのです。

何とかするためには、タイムラグが終了してから次の処理を呼ばなければいけません。
いったいどうすれば実現できるのでしょうか?

Jqueryには処理終了後に次の処理を実行する機能があります

今回もググって調べてみると、Jqueryには処理終了後に次の処理を実行する機能がありました。
Call backと呼ばれる処理です。

[sample]論より証拠：実際にできたものがこちら

こちらのサンプルは、スライドダウン完了後に背景の色が変わります。
ちゃんとスライドダウンが終わるのを待ってから処理しています。

いったいどうやって実現しているのでしょうか?

Call backのやりかた

Call backのやり方はコロンブスの卵的な発想です。
順を追って説明いたします。

現象が発生する（同時処理される）記述は次の通りです。

スライドダウン処理と、背景の色を変える処理をそのまま記述しています。
スライドダウンは、処理完了までタイムラグがあるため、終わる前に背景色変更が実行されます。

現象が発生しない（処理終了を待ってから次の処理）記述は次の通りです。

スライドダウン処理記述の中に、次の処理を記述しています。
これがCall backです。

関数の中に記述しているから、処理終了まで待てるのです。
※ちなみにCall backが使える処理と使えない処理があります。

関数の引数に関数を呼ぶ

これは、PHPは原則処理が終わってから次の処理が動くためです。
Jqueryは同時に複数処理が実行できてしまう点と異なります。

そこで、関数の中で関数を呼ぶという処理があります。
なんともJqueryには便利な機能がありました。

余談ですが気になったのでこんな処理にしてみました

今回のサンプルは、スライドダウン後に背景の色を変えるというものでした。
ただ、見た目パッと色が変わるのが少々気になったので、次のような「背景色が徐々に変化するパターン」も作ってみました。

また参考になれば幸いです。

[sample]スライドダウン後背景がフェードインするパターン

JqueryはCSSなども組み合わせていろいろな表現ができます。