こんにちは伊澤です。

今回は初心に立ち返り、jQueryでも使って何も考えず
スライドダウン・スライドアップでも作りましょう。
jQueryを使った事があるなら一度はハマる罠にかかりに行きましょう。

まずはソースと見た目。

<div class=”test” style=”background: cadetblue; color:#fff; text-align: center;”>ホバーしてみると</div>
<div class=”test02″ style=”background: darkseagreen; color:#fff;text-align: center;height: 200px;”>出てきます</div>

なんの捻りも無いソースです。


見た目はこんな感じ。

「ホバーしてみると」
↓
「出てきます」

となるように何も考えず書いてみましょう。

<script>
$(function() {
$(".test02").hide();
$(".test").hover(function() {
$(".test02").slideDown(200);
},
function() {
$(".test02").slideUp(100);
});
});
</script>



出来ました。

①「出てきます」の部分を非表示にして
②「ホバーしてみると」をホバーすると
③「出てきます」が出てきます。
④ホバーを外すと元に戻ります。
動きますね。(ここから画像になります。)

と、ここで罠が動作いたします。

ホバーした分だけスライドダウン・スライドアップを繰り返す罠！

ホバーを連続で何度も行うと、出たり入ったりをホバーを止めてもしばらく行います。
ジャッコジャッコ動きます。






ジャッコジャッコ。

連続でホバーした時の挙動を説明します。
例えば連続で4回ずつホバーとホバーを外すのを繰り返した場合はこんな感じです。

最初にホバーした時slideDown(200)がアニメーションが開始します。
一回目のslideDown(200)がアニメーション中にホバーを外した時に二回目のslideUp(100)が順番待ちに並びます。
次にホバーした時二回目のslideDown(200)がアニメーションが順番待ちに並びます。
一回目のslideDown(200)がアニメーション中にホバーを外した時に三回目のslideUp(100)が順番待ちに並びます。
次にホバーした時三回目のslideDown(200)がアニメーションが順番待ちに並びます。
そろそろ一回目のslideDown(200)がアニメーションが終了し、二回目のslideUp(100)が開始。
次にホバーした時四回目のslideDown(200)がアニメーションが順番待ちに並びます。
slideDown(200)がアニメーション中にホバーを外した時に四回目のslideUp(100)が順番待ちに並びます。

文章にすると分かりにくいですね。
こうします。

レジ前の行列みたいなものです。

レジを通している人がいても次々に人が並んでしまうと待ち行列になってしまいます。
そこでアニメーション中に順番待ちを解除出来る方法を加えます。
stop()ですね。


<script>
$(function() {
$(".test02").hide();
$(".test").hover(function() {
$(".test02").slideDown(200).stop(false, true);
},
function() {
$(".test02").slideUp(100).stop(false, true);
});
});
</script>

加えました。
はい、ここで再び罠が発動します。

動きはするけどアニメーションしない！

中間のアニメーションが無く、結果だけが残る！






どうやらstopを入れた時に動作中のアニメーションをフッ飛ばしてしまったようです。
アニメーションが終わった後だけ、アニメーションが終わってくれればいいんですが・・・。

解決はそう難しくは無いのです。

解答からお見せしますとこんな風な方法があります。
コールバックでstopする。

<script>
$(function() {
$(".test02").hide();
$(".test").hover(function() {
$(".test02").slideDown(200,function(e){$(".test02").stop(false, true);});
},
function() {
$(".test02").slideUp(100,function(e){$(".test02").stop(false, true);});
});
});
</script>



単純にアニメーションさせたいだけなのに意外と陥りやすい罠でした。
ひっかからないようにお気をつけ下さい。