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

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

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

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

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

stop([clearQueue], [gotoEnd])

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

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

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

テストコード

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

Javascript
  1.  var li_width = {_min: '50px', _max: '400px'};
  2.  var li_height = {_min: '20px', _max: '100px'};
  3.  var li_style = {width: li_width._min, height: '20px', display: 'block', margin: '0px'};
  4.  var li_colors = ['#20B7F2', '#3086A3', '#022037'];
  5.  
  6.  $('#JQStopTest li').each(function(i){
  7.   li_style.backgroundColor = li_colors[i];
  8.   $(this).css(li_style).hover(function(){
  9.   $(this).animate({width: li_width._max}).animate({height: li_height._max});
  10.   }, function(){
  11.   $(this).animate({width: li_width._min}).animate({height: li_height._min});
  12.   });
  13.  });
HTML
  1.  <div id="JQStopTest">
  2.  <ul>
  3.  <li>&nbsp;</li>
  4.  <li>&nbsp;</li>
  5.  <li>&nbsp;</li>
  6.  </ul>
  7.  </div>

stop()なし

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

  •  
  •  
  •  
Javascript
  1.  $('#JQStopTest1 li').each(function(i){
  2.   li_style.backgroundColor = li_colors[i];
  3.   $(this).css(li_style).hover(function(){
  4.   $(this).animate({width: li_width._max}).animate({height: li_height._max});
  5.   }, function(){
  6.   $(this).animate({width: li_width._min}).animate({height: li_height._min});
  7.   });
  8.  });
HTML
  1.  <div id="JQStopTest1">
  2.  <ul>
  3.  <li>&nbsp;</li>
  4.  <li>&nbsp;</li>
  5.  <li>&nbsp;</li>
  6.  </ul>
  7.  </div>

stop(false, false)

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

  •  
  •  
  •  
Javascript
  1.  $('#JQStopTest2 li').each(function(i){
  2.   li_style.backgroundColor = li_colors[i];
  3.   $(this).css(li_style).hover(function(){
  4.   $(this).stop().animate({width: li_width._max}).animate({height: li_height._max});
  5.   }, function(){
  6.   $(this).stop().animate({width: li_width._min}).animate({height: li_height._min});
  7.   });
  8.  });
HTML
  1.  <div id="JQStopTest2">
  2.  <ul>
  3.  <li>&nbsp;</li>
  4.  <li>&nbsp;</li>
  5.  <li>&nbsp;</li>
  6.  </ul>
  7.  </div>

stop(false, true)

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

  •  
  •  
  •  
Javascript
  1.  $('#JQStopTest3 li').each(function(i){
  2.   li_style.backgroundColor = li_colors[i];
  3.   $(this).css(li_style).hover(function(){
  4.   $(this).stop(false, true).animate({width: li_width._max}).animate({height: li_height._max});
  5.   }, function(){
  6.   $(this).stop(false, true).animate({width: li_width._min}).animate({height: li_height._min});
  7.   });
  8.  });
HTML
  1.  <div id="JQStopTest3">
  2.  <ul>
  3.  <li>&nbsp;</li>
  4.  <li>&nbsp;</li>
  5.  <li>&nbsp;</li>
  6.  </ul>
  7.  </div>

stop(true, false)

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

  •  
  •  
  •  
Javascript
  1.  $('#JQStopTest4 li').each(function(i){
  2.   li_style.backgroundColor = li_colors[i];
  3.   $(this).css(li_style).hover(function(){
  4.   $(this).stop(true, false).animate({width: li_width._max}).animate({height: li_height._max});
  5.   }, function(){
  6.   $(this).stop(true, false).animate({width: li_width._min}).animate({height: li_height._min});
  7.   });
  8.  });
HTML
  1.  <div id="JQStopTest4">
  2.  <ul>
  3.  <li>&nbsp;</li>
  4.  <li>&nbsp;</li>
  5.  <li>&nbsp;</li>
  6.  </ul>
  7.  </div>

stop(true, true)

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

  •  
  •  
  •  
Javascript
  1.  $('#JQStopTest5 li').each(function(i){
  2.   li_style.backgroundColor = li_colors[i];
  3.   $(this).css(li_style).hover(function(){
  4.   $(this).stop(true, true).animate({width: li_width._max}).animate({height: li_height._max});
  5.   }, function(){
  6.   $(this).stop(true, true).animate({width: li_width._min}).animate({height: li_height._min});
  7.   });
  8.  });
HTML
  1.  <div id="JQStopTest5">
  2.  <ul>
  3.  <li>&nbsp;</li>
  4.  <li>&nbsp;</li>
  5.  <li>&nbsp;</li>
  6.  </ul>
  7.  </div>
投稿日 2010年1月19日 12:10
カテゴリ JavaScript
タグ jQuery | サンプルコード | テストコード
トラックバック URL http://www.kantenna.com/cgi-bin/mt504/mt-tb.cgi/1188

関連ページ(3)

学びログ2011年2月14日 02:14

slideUp、slideDownでstop()を上手く動作させる方法

 例えば、こんなコードを書いたとします。 $(~~).mouseover(function(){ $(this).slideDown("fast") ...

WEBプログラム覚書2011年12月 9日 01:55

[jQuery] jQuery入門前の話。

jQuery APIリファレンスをみて、jQuery.each()とjQuery(selector).each()のような同じ名前のメソッドで何が違うんだ...

WEBプログラム覚書2011年12月12日 11:25

[jQuery] もう+演算子とはおさらば。jQuery Templates

jQueryに1年以上前から公式なテンプレートエンジンがあった件

コメント

コメントする
Name
Email Address
URL