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

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

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

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

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

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

現象は次の通りです

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

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

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

現象が発生するソース

<!doctype html><html><head><metacharset="shift_jis"><title>スライドダウン</title><styletype="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><scriptsrc="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();
		}
		else
		{
			$(".down_area").slideUp("slow");
			$("body").css("background-color", "transparent");
			$("input").val();
		}
	});
});
</script></head><body><divclass="down_area"><p>スライドダウン</p></div><p></p><inputname=""type="button"value=></body></html>Code language:HTML, XML(xml)

原因はJqueryの動作特性

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

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

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

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

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

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

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

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

Call backのやりかた

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

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

$(".down_area").slideDown("slow");
$("body").css("background-color", "#FC0");Code language:JavaScript(javascript)

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

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

$(".down_area").slideDown("slow", function()
{
	$("body").css("background-color", "#FC0");
});Code language:JavaScript(javascript)

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

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

関数の引数に関数を呼ぶ

PHPには関数をコールする関数があります。（call_user_func()関数）
ただ、複数処理同時というわけではありません。

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

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

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

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

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

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

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

今回のレポートは以上です。
読んでいただいてありがとうございました。

ホームページに関するお悩み事やご相談事がございましたら私どもまでご連絡ください。 鋭意ご対応申し上げます。
ホームページのご提案もさせていただいております

備忘録,JqueryJquery,同時処理,時間差,SlideDown,完了後に処理

Posted by OBATA