最近はJqueryを装飾に使用することが何かと多いです。
ブラウザ側だけで動作するので、手軽なことも理由のひとつです。
ところが、最近このようなことがありました。
「動作タイミングがおかしい」
どういうことかというと、Jqueryのスライドダウン時に別の動作を組み合わせていた時の話です。
①スライドダウン処理 ②別の処理の順番で処理されることを期待していました。
でも実際には同時に処理されました。
今回、これを何とかすることにしました。
現象は次の通りです
Jqueryスライドダウン後に処理されることを期待しているのですが、実際には同時に処理されています。
サンプルは、スライドダウン時に背景色を変更しています。
スライドダウン完了後に背景色を変えたいのですが、実際には同タイミングで処理されています。
[sample]現象の発生するサンプルはこちら
現象が発生するソース
<!doctype html>
<html>
<head>
<meta charset="shift_jis">
<title>スライドダウン</title>
<style type="text/css">
body
{
margin: 0px;
padding: 0px;
text-align: center;
}
.down_area
{
background-color: #FF9;
text-align: center;
width: 100%;
padding-top: 30px;
padding-bottom: 30px;
display: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function()
{
$("input").click(function()
{
if ($(".down_area").css("display") == "none")
{
$(".down_area").slideDown("slow");
$("body").css("background-color", "#FC0");
$("input").val("スライドUPします");
}
else
{
$(".down_area").slideUp("slow");
$("body").css("background-color", "transparent");
$("input").val("スライドDOWNします");
}
});
});
</script>
</head>
<body>
<div class="down_area">
<p>スライドダウン</p>
</div>
<p>問題点：スライドが終わる前に背景色が変わってしまいます</p>
<input name="" type="button" value="スライドDOWNします">
</body>
</html>
原因はJqueryの動作特性
Jqueryのは前の処理を待たずに次の処理ができます。
厳密にいうと、SlideDown処理はゆっくり動作するため、終了までタイムラグがあります。
ところが、次の処理はタイムラグを待たずに実行されます。
そのため、同時処理されているように見えるのです。
何とかするためには、タイムラグが終了してから次の処理を呼ばなければいけません。
いったいどうすれば実現できるのでしょうか?
Jqueryには処理終了後に次の処理を実行する機能があります
今回もググって調べてみると、Jqueryには処理終了後に次の処理を実行する機能がありました。
Call backと呼ばれる処理です。
[sample]論より証拠：実際にできたものがこちら
こちらのサンプルは、スライドダウン完了後に背景の色が変わります。
ちゃんとスライドダウンが終わるのを待ってから処理しています。
いったいどうやって実現しているのでしょうか?
Call backのやりかた
Call backのやり方はコロンブスの卵的な発想です。
順を追って説明いたします。
現象が発生する（同時処理される）記述は次の通りです。
$(".down_area").slideDown("slow");
$("body").css("background-color", "#FC0");スライドダウン処理と、背景の色を変える処理をそのまま記述しています。
スライドダウンは、処理完了までタイムラグがあるため、終わる前に背景色変更が実行されます。
現象が発生しない（処理終了を待ってから次の処理）記述は次の通りです。
$(".down_area").slideDown("slow", function()
{
$("body").css("background-color", "#FC0");
});スライドダウン処理記述の中に、次の処理を記述しています。
これがCall backです。
関数の中に記述しているから、処理終了まで待てるのです。
※ちなみにCall backが使える処理と使えない処理があります。
関数の引数に関数を呼ぶ
ただ、複数処理同時というわけではありません。
これは、PHPは原則処理が終わってから次の処理が動くためです。
Jqueryは同時に複数処理が実行できてしまう点と異なります。
そこで、関数の中で関数を呼ぶという処理があります。
なんともJqueryには便利な機能がありました。
余談ですが気になったのでこんな処理にしてみました
今回のサンプルは、スライドダウン後に背景の色を変えるというものでした。
ただ、見た目パッと色が変わるのが少々気になったので、次のような「背景色が徐々に変化するパターン」も作ってみました。
また参考になれば幸いです。
[sample]スライドダウン後背景がフェードインするパターン
JqueryはCSSなども組み合わせていろいろな表現ができます。