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>

参照サイト

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

コメントする

Name

Email Address

URL

コメント(スタイル用のHTMLタグを使えます)

ログイン情報を記憶

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

Javascript

stop([clearQueue], [gotoEnd])

参照サイト

テストコード

Javascript

HTML

stop()なし

Javascript

HTML

stop(false, false)

Javascript

HTML

stop(false, true)

Javascript

HTML

stop(true, false)

Javascript

HTML

stop(true, true)

Javascript

HTML

参照サイト

コメント

コメントする

KANTENNA.COM

プログラム

カテゴリ

Memo

プログラムの原則

jQuery不要のアニメーションスクロールライブラリAOS

Error 1449 The user specified as a definer (‘username’@’hostname’) does not exist

Invalid default value for カラム名

14: curl#6 – “Could not resolve host: mirrors.iuscommunity.org; 不明なエラー”

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

Javascript

stop([clearQueue], [gotoEnd])

参照サイト

テストコード

Javascript

HTML

stop()なし

Javascript

HTML

stop(false, false)

Javascript

HTML

stop(false, true)

Javascript

HTML

stop(true, false)

Javascript

HTML

stop(true, true)

Javascript

HTML

参照サイト

コメント

コメントする

プログラム

カテゴリ

Memo

プログラムの原則

jQuery不要のアニメーションスクロールライブラリAOS

Error 1449 The user specified as a definer (‘username’@’hostname’) does not exist

Invalid default value for カラム名

14: curl#6 – “Could not resolve host: mirrors.iuscommunity.org; 不明なエラー”

PAGE RANK

TIME LINE

Tag