Zeptoフェード

Question

私は次のCoffeeScriptのコードを持っているを中断する方法：LI要素内のステータスメッセージを表示するように意図されて

# Coffeescript 
setMessage = (message, options = {}) -> 
    t = statusArea.text(message) 
    if options['fade'] 
    t.addClass('yellow') 
    t.fadeOut 4000, -> 
     $(this).removeClass 'yellow' 

// Javascript 
setMessage = function(message, options) { 
    var t; 
    if (options == null) options = {}; 
    t = statusArea.text(message); 
    if (options['fade']) { 
    t.addClass('yellow'); 
    return t.fadeOut(4000, function() { 
     return $(this).removeClass('yellow'); 
    }); 
    } 
}; 

。 options['fade']が何かに設定されている場合、私はフェーディングのものを呼び出します。私のプログラムフローではまず、Ajaxコールを発行してSELECTをポピュレートし、フェード（すなわち、options['fade']をtrueに設定した状態）を「リモート呼び出し」メッセージとしてステータス領域にポストします。これはほとんど瞬間的なこともあれば、しばらく時間がかかることもあります。結果とネットワークトラフィックのサイズによって異なります。 SELECTが入力されると、フェードのない「準備完了」メッセージがポストされます。

この問題は、応答がほぼ瞬間的である場合に発生します。その場合、テキストは「準備完了」に置き換えられるが、アニメーションは継続し、メッセージをフェードアウトする（すなわち、LI要素をフェードアウトさせる）。

別のものを開始する前に、以前の移行を終了させる方法はありますか？

Answer 1

stop()の実装方法はわかりませんが、最も信頼性の高い方法はおそらくノードのcssTextを完全に削除することです。

私はfiddle to demonstrate 3 implementationsを作成しました。最初の2つの実装での問題は、どのプロパティが現在アニメーション化されているのか、また元の値であるのかを知る必要があることです。ただし、ノードのCSSテキストからこのプロパティを削除して適用します。このようなもので十分ですZeptoアニメーション解除する

：

$.fn.stop = function() { 
    $(this).each(function() { 
     $(this) 
      .off("webkitTransitionEnd webkitAnimationEnd") 
      .get(0).style.cssText = ""; 
     } 
    }); 
    return this; 
}; 

をしかし、この副作用はzeptoと、以前のスタイルの変更が同様に除去されることになります。意味のあるロバストな停止機能もアニメーションキューに含まれ、アニメートされたプロパティにもアクセスする必要があります。