特定のjQueryアニメーションを停止する

Question

私は1つのオブジェクトに複数のアニメーションを用意しています。そのすべてではなく、特定のアニメーションを停止する必要があります。 .stop（）メソッドがこれを行うことができるようには見えません。

たとえば、不透明度と幅を同時にアニメーション化する場合、幅アニメーションを完了している間に不透明度アニメーションをキャンセルする必要があります。これは不可能だと思われますが、誰かが私が見逃しているトリックやAPIコールを知っていることを期待しています。

注：私は、彼らがすでに考えた後

Answer 1

私は自分の質問に答える男であることを嫌っています（詳細な回答と脳力を入れてくれてありがとう！）が、私は直接的な答えを見つけました。どうやら、デフォルトでtrueに設定されている "queue"という名前の.animate（）メソッドのパラメータがありますが、アニメーションを即時に実行するにはfalseに設定することができます。

これは、queueをfalseに設定すると、別の呼び出しを使用して複数のアニメーションを実行できることを意味し、前のものを終了するのを待つ必要はありません。すでにアニメーション化されているプロパティのアニメーションを実行しようとすると、2番目のアニメーションが最初にオーバーライドされます。これは、キュー "偽"を使用して、持続時間0の現在の値にアニメーション化するだけでプロパティのアニメーションを停止できることを意味します。

アン例：

$myElement = $("#animateElement"); 
$myElement.animate({width: 500}, {duration: 5000}); 
$myElement.animate({height: 500}, {duration: 5000, queue: false}); 
// ... Wait 2 seconds ... 
$myElement.animate({width: $myElement.width()}, {duration: 0, queue: false}); 

Another optionは私の拡張要求に応答した優雅なjQueryの貢献によって示唆されました。これは、アニメーションのステップ関数を使用する機能を利用します（ステップ関数はアニメーションの各ポイントで呼び出され、必要な基準に基づいてアニメーションパラメータを操作できます）。これも問題を解決することができましたが、私はそれが "queue：false"オプションよりもはるかに汚いと感じました。

Answer 2

を開始した後、私はそれらの属性のアニメーションの一部を停止する能力を同時に複数の属性をアニメーション化しているよ、キューに入れられたアニメーションの話ではありませんこれについてもう少し詳しく説明すると、アニメーションがjQueryで処理される方法のために、あなたがやろうとしていることは簡単に実行できないことに気付きました。

アニメーションはキューによって管理されるため、同じ機能を持たずに同じ要素でアニメーションを同時に実行することはできません。言うことです

、

$(element).animate(aThing, aTime); 
      .animate(anotherThing, anotherTime); 

は並列で実行するつもりはありません。 aThingはanotherTime持続anotherThing続く、のatimeに終了します。

したがって、あなただけの同じ機能でそれらを持つことにより、複数の変更を行うことができます。

$(element).animate({aThing: aValue, anotherThing: anotherValue}, aTime); 

---

をここでアニメーション機能がjQueryの内で処理される方法の解剖学の迅速な説明があります。

タイマーオブジェクトは、アニメーションの継続時間の要素に割り当てられている：あなたが停止機能を呼び出すと

function t(gotoEnd) { 
    return self.step(gotoEnd); 
} 

t.elem = this.elem; 
jQuery.timers.push(t); 

、それはタイマーからタイマーを削除します。

// go in reverse order so anything added to the queue during the loop is ignored 
for (var i = timers.length - 1; i >= 0; i--) { 
    if (timers[i].elem === this) { 
     if (gotoEnd) { 
      // force the next step to be the last 
      timers[i](true); 
     } 

     timers.splice(i, 1); 
    } 
} 

ので、そこにタイマー自体が強制終了されるため、アニメーション関数の特定のプロパティを削除する方法はありません。

---

私はこれを達成すると考えることができる唯一の方法は、アニメーションを再エンキューし、現在の1を停止し、開始時刻と継続時間を追跡することです。代わりに1つのアニメーションの

var start = $.now(); 
var duration = 5000; 

$(element).animate({opacity: '0.5', width: '500px'}, duration); 

...

var remaining = duration - ($.now() - start); 
$(element).animate({opacity: '0.5', remaining) 
      .stop(); 

Answer 3

、あなたはその後、すなわち20から40パーセントからアニメーション、その後、0-20％のから不透明度をアニメーション化（いくつかの小さなアニメーションにそれを破ることができます40-60％など）、.stop()の代わりにアニメーションを開始すると、もう一度起動しないでください。

Answer 4

私はjQueryサイクルプラグインを使用して、さまざまなアニメーションタイプ（ワイプ、シャッフル、ズームなど）を使用して同じページに12個のスライドショーをアニメーション表示しています。 - 私のワイプ、シャッフルやズームが停止された

が

# This code stops all current animations on an element 

$(".box img").hover(
    function(){ 
     $(this).stop().fadeTo("slow",0.7); 
    }, 
    function(){ 
     $(this).stop().fadeTo("fast",1); 
    } 
); 

.stop()機能もそれにサイクルプラグインを停止した問題は、追跡：あなたは、各スライドショーの上に浮かんだように私は、少しの画像をフェードインするために私自身の小さなスクリプトを持っていました突然、アニメーションの途中でページが破損し、位置がずれてしまいます。

# This code suited me better - it leaves the other running animations untouched 

$(".box img").hover(
    function(){ 
     $(this).animate({opacity: 0.7}, {duration: 1000, queue: false}); 
    }, 
    function(){ 
     $(this).animate({opacity: 1}, {duration: 250, queue: false}); 
    } 
); 

Answer 5

UPDATEのjQuery 1.7のよう2013

あなたが名前のキューに.animate()を使用し、中にのみアニメーションを停止する.stop(queuename)を使用することができます解決策は、あなたのキューを実装するために「偽」アイデアでしたキュー。

http://api.jquery.com/stop/