WEBプログラム覚書::[jQuery]こんな機能があったんだ。jQuery stop()

2010年01月19日 12:10

[jQuery]こんな機能があったんだ。jQuery stop()

パーマリンク | http://www.kantenna.com/cgi-bin/mt/mt-tb.cgi/517

「Buttons like Windows 7 with JS & CSS」を見てて


el.win7BG.stop().animate({'opacity':1},300);

って記述あったので調べてみたらstop()って色々使えるんですね。全然しらなかったです。

stop([clearQueue], [gotoEnd])

引数は2つ。何も指定しないとfalse

[clearQueue]がtrueの場合、持っているキューが全て削除される。[gotoEnd]はtrueにすると現在のアニメーションの最後のコマへジャンプする。

参照サイト

Effects/stop - jQuery JavaScript Library

いまいちわからなかったのでテスト。

テストコード

マウスオーバーすると横幅が広がり、縦に伸びるアニメーションを作成する。


var li_width = {_min: '50px', _max: '400px'};
var li_height = {_min: '20px', _max: '100px'};
var li_style = {width: li_width._min, height: '20px', display: 'block', margin: '0px'};
var li_colors = ['#20B7F2', '#3086A3', '#022037'];

$('#JQStopTest li').each(function(i){
    li_style.backgroundColor = li_colors[i];
    $(this).css(li_style).hover(function(){
        $(this).animate({width: li_width._max}).animate({height: li_height._max});
    }, function(){
        $(this).animate({width: li_width._min}).animate({height: li_height._min});
    });
});

// HTML
<div id="JQStopTest">
<ul>
<li>&nbsp;</li>
<li>&nbsp;</li>
<li>&nbsp;</li>
</ul>
</div>

stop()なし

stop()がない場合、当然ながらキューが削除されないのでイベントが発生した回数分だけ実効される。


$('#JQStopTest1 li').each(function(i){
    li_style.backgroundColor = li_colors[i];
    $(this).css(li_style).hover(function(){
        $(this).animate({width: li_width._max}).animate({height: li_height._max});
    }, function(){
        $(this).animate({width: li_width._min}).animate({height: li_height._min});
    });
});

<div id="JQStopTest1">
<ul>
<li>&nbsp;</li>
<li>&nbsp;</li>
<li>&nbsp;</li>
</ul>
</div>

stop(false, false)

デフォルトではfalseとなっている。一瞬だけマウスオーバーした場合、マウスアウトした時点で現在のアニメーション(横の変化)を停止。 [clearQueue]がfalseのためキュー(縦の変化)が存在するので次のキュー(縦の変化)に移行する。


$('#JQStopTest2 li').each(function(i){
    li_style.backgroundColor = li_colors[i];
    $(this).css(li_style).hover(function(){
        $(this).stop().animate({width: li_width._max}).animate({height: li_height._max});
    }, function(){
        $(this).stop().animate({width: li_width._min}).animate({height: li_height._min});
    });
});

<div id="JQStopTest2">
<ul>
<li>&nbsp;</li>
<li>&nbsp;</li>
<li>&nbsp;</li>
</ul>
</div>

stop(false, true)

[gotoEnd]がtrueの場合、途中で中断した場合でも現在のアニメーションの最終コマに移動する。一瞬だけ、マウスオーバーした場合、上記と違い横幅がMAXまで伸びる。あとは同じく、残っているキュー(縦の変化)が実行される。


$('#JQStopTest3 li').each(function(i){
    li_style.backgroundColor = li_colors[i];
    $(this).css(li_style).hover(function(){
        $(this).stop(false, true).animate({width: li_width._max}).animate({height: li_height._max});
    }, function(){
        $(this).stop(false, true).animate({width: li_width._min}).animate({height: li_height._min});
    });
});

<div id="JQStopTest3">
<ul>
<li>&nbsp;</li>
<li>&nbsp;</li>
<li>&nbsp;</li>
</ul>
</div>

stop(true, false)

JQStopTest2と同じで一瞬だけマウスオーバーしてマウスアウトした場合、[gotoEnd]がfalseのため横の変化が途中で止まる。 [clearQueue]がtrueの場合、持っているキュー(縦の変化)も削除されるので縦に変化するアニメーションは実行されない。


$('#JQStopTest4 li').each(function(i){
    li_style.backgroundColor = li_colors[i];
    $(this).css(li_style).hover(function(){
        $(this).stop(true, false).animate({width: li_width._max}).animate({height: li_height._max});
    }, function(){
        $(this).stop(true, false).animate({width: li_width._min}).animate({height: li_height._min});
    });
});

<div id="JQStopTest4">
<ul>
<li>&nbsp;</li>
<li>&nbsp;</li>
<li>&nbsp;</li>
</ul>
</div>

stop(true, true)

両方trueの場合。一瞬だけマウスオーバーしてマウスアウトした場合、現在のアニメーション(横の変化)は最後のコマにジャンプするが、縦の変化のキューはクリアされてるため実行されない。


$('#JQStopTest5 li').each(function(i){
    li_style.backgroundColor = li_colors[i];
    $(this).css(li_style).hover(function(){
        $(this).stop(true, true).animate({width: li_width._max}).animate({height: li_height._max});
    }, function(){
        $(this).stop(true, true).animate({width: li_width._min}).animate({height: li_height._min});
    });
});

<div id="JQStopTest5">
<ul>
<li>&nbsp;</li>
<li>&nbsp;</li>
<li>&nbsp;</li>
</ul>
</div>