【Javascript】jQueryのCustomエフェクト5

jQueryのCustomエフェクト5

---

1: stopメソッドついて
2: stop( )
3: stop( clearQueue )
4: stop( clearQueue, gotoEnd )

stop( clearQueue, gotoEnd )

次に、stopメソッドの第2引数 gotoEndを試してみます。gotoEndは、アニメーションを停止後、次のキューではなく最後のステップへ強制移動します。省略時はfalseで、次のキューから始まります。

前々ページの引数省略サンプルでは、stop( )メソッドで停止後、アニメーションが、すぐに次の動作へ移り、 前ページの第1引数をtrueにしたサンプルでは、stop( true )後、ピタリと停止しました。

では、今回は、stop( true, true )では、どうなるでしょう？ StartボタンをクリックしてからStopボタンをクリックしてみてください。

どうですか？動作中のアニメーションの終了状態へ行って停止しましたね。

つまり、たとえば、.animate({left:200},1000) の途中でStopすれば、即座に{left:200}へ行き停止します。もし、.animate({opacity : 0.2 },1000)でフェイドイン中なら、0.2までいきなり行って停止するという具合になります。

コードは次のとおりです。

<style>
#test1{
  height  : 200px;
}
.divs{
  height  : 30px;
  width   : 30px;
  position: relative; 
  left    : 0px; 
  top     : 0px; 
}
</style>

<div id="test1">
  <button id="btn1">Start</button>
  <button id="btn2">Stop</button>
  <div id="su1" class="divs"
       style="background:#a4c3ff">　</div>
</div>

<script type="text/javascript">
 jQuery(function($){

   function runIt() {
       $("#su1") 
         .animate({left :0, top : 0},1)
         .animate({left    : 200 },1000)
         .animate({top     : 100 },1000)
         .animate({opacity : 0.2 },1000)
         .animate({left    : 0 },500)
         .animate({top     : 0 },500)
         .animate({opacity : 1 },2000)
   }

   $("#btn1")
     .click(function () {
       runIt()
     })

   $("#btn2")
     .click(function () {
       $("#su1").stop( true,true )
     })
 });
</script>