KANTENNA.COM

Solarized

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

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

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

Javascript

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

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

stop([clearQueue], [gotoEnd])

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

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

参照サイト

Effects/stop - jQuery JavaScript Library

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

テストコード

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

Javascript

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> </li>
<li> </li>
<li> </li>
</ul>
</div>

stop()なし

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

Javascript

$('#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});
});
});

HTML

<div id="JQStopTest1">
<ul>
<li> </li>
<li> </li>
<li> </li>
</ul>
</div>

stop(false, false)

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

Javascript

$('#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});
});
});

HTML

<div id="JQStopTest2">
<ul>
<li> </li>
<li> </li>
<li> </li>
</ul>
</div>

stop(false, true)

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

Javascript

$('#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});
});
});

HTML

<div id="JQStopTest3">
<ul>
<li> </li>
<li> </li>
<li> </li>
</ul>
</div>

stop(true, false)

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

Javascript

$('#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});
});
});

HTML

<div id="JQStopTest4">
<ul>
<li> </li>
<li> </li>
<li> </li>
</ul>
</div>

stop(true, true)

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

Javascript

$('#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});
});
});

HTML

<div id="JQStopTest5">
<ul>
<li> </li>
<li> </li>
<li> </li>
</ul>
</div>

jQuery逆引きマニュアル Webデザインの現場で役立つ基本と実践: 作者:徳田和規 | 価格:￥ 3,150

参照サイト

投稿日	2010年1月19日 12:10
カテゴリ	JavaScript
タグ	jQuery \| サンプルコード \| テストコード
トラックバック URL	http://www.kantenna.com/cgi-bin/mt504/mt-tb.cgi/1188