• HOME
  • BLOG
  • HTML5
  • Transit 0.9.9 (jQuery Plug-in) で stop()が効かない件

Transit 0.9.9 (jQuery Plug-in) で stop()が効かない件

CSS3アニメーションを簡単に扱えるjQuery対応プラグインTransit(v0.9.9)ですが、stop()が効かず困ってしまってしらべてみました。

jQuery Transitですが、
jQuery animate ののりで、アニメーションを途中で停止したいときに、stop() を設定してみたのですが、
止まらず困っていました。

調べていみると(13.2.17現在)、githugを覗いてみると問題のリクエストがされていて、
transitionStop というメソッドが追加され、アニメーションの停止ができるようになっていました。

rstacruz / jquery.transit | Add .transitionStop() method

こちらの、fix .transitionStop の行のところから、0a0086c..のコードをダウンロードしてきたところ、
transitionStop()メソッドが追加されて、アニメーションを止めることができました。

しかし、問題が2つほど。

  • transitionStop 呼び出しでjQueryチェーンが途絶えてしまう。
  • Fallback to frame-based animation 設定を行なっている場合、対象環境でアニメーションが停止しない。

チェーンが途絶えてしまうほうは、
追加された transitionStop のコードで、return がされていないので、
これは、ダウンロードしてきたコードの、
680行目あたり、メソッドの終わり

return this;

を追加して修正完了。

もう一つのほうですが、これは
IE9など、transitionに対応していない環境用に、

if (!$.support.transition){
$.fn.transition = $.fn.animate;

このように書くことで、transitionを使用しない方法でアニメーションを実行してくれるのですが、
このケースのフォローがなされてないようで、アニメーションが停止しません。

transitionStop() を使用せずに、 stop()を使用すれば停止されますが、
コードを分岐させなくてはならないので、transitionに対応していない環境では、 stopを実行するよう修正してみます。

メソッドの定義頭である639行目あたり、

if (!$.support.transition){
    this.each(function() {
      var self = $(this);
      self.stop(clearQueue,jumpToEnd);
    });
    return this;
}

を追加します。

これでとりあえずなおすことできました。