jQueryのstop（）はまだキューに入れられていないアニメーションをブロックしているようです

Question

jQueryのstop()は実際にどのように動作しますか？

here (http://jsfiddle.net/hWTT6/)と表示されている場合は、メインの青色のボックスの上にマウスを移動すると、赤色に消えてしまいます。マウスを寄せても消えてしまいます。問題は、最初のフェードが完了する前にマウスが離れていても、完全に赤色に消えてから青色に戻ることです。この問題は、スライド効果でより明確に確認できます。スライド "ボタン"の上にカーソルを置くと、メインボックスが青色にスライドし、オフになり、スライドします。しかし、最初のアニメーションが完了する前に、ホバーオンとオフ、オン/オフを試してみてください。 4つのアニメーションがすべて実行されていることがわかります。私はここに両方の​​例を挙げて、それがただ一つの効果か何かの問題ではないことを示しました。

これは、アニメーションの前にstopを追加することで簡単に修正できると考えました（コード内でコメントアウトされているように）。しかし、私がこれを行うと、現在のアニメーションは停止し、次のアニメーションは決して開始しません。ほぼstopがの後にの後に発生しているアニメーションをブロックしているかのように、stopへの呼び出し。

私はここで何が欠けていますか？

ありがとうございました。

Answer 1

.stop()には2つの引数があります。どちらのブール、示す：

- clearQueue (first) 
- jumpToEnd (second) 

をそう$('#foo').stop(true, true).doSomeOtherStuff()を呼び出すことによって、あなたの希望の目標を取得する必要があります。

参考：.stop()

Answer 2

あなたがストップを（）を使用すると、キュー内のすべてのイベントをキャンセルして、前のアニメーションの最後にジャンプ（真、真）となるようにオプション設定することができます。フィドルを見ます：http：//jsfiddle.net/hWTT6/4/

Answer 3

の停止方法は、以下の差の方法で呼び出すことができます。

.stop(true); 
//Same as: 
.stop(true, false); //Empty the animation queue only 


//Or 
.stop(true,true); // Empties the animation queue AND jumps to the end 


//Default 
.stop() 

//Same as 

.stop(false,false); 

ではなく.animateを使用してより良い方法があるかもしれません：Demo Here

$(function() { 
    $('#fade') 
    .mouseenter(function() { 
     $('#fg_fade').stop().css('height', '10em').animate({'opacity' : '0'}, 'slow'); 
    }) 
    .mouseleave(function() { 
     $('#fg_fade').stop().css('height', '10em').animate({'opacity' : '1'}, 'slow'); 
    }); 


    $('#slide_fire') 
    .mouseenter(function() { 
     $('#fg_fade').stop().css('opacity', '1').animate({'height' : '0'}, 'slow');  
    }) 
    .mouseleave(function() { 
     $('#fg_fade').stop().css('opacity', '1').animate({'height' : '10em'}, 'slow'); 
    }); 

}); 

アニメーションはあなたがそれをしたい時に停止し、まだ次のアニメーションを実行しますこの方法です。

.stopを次にslideUp/slideDownまたはfadeIn/fadeOutとする問題は、アニメーションが途中で終了し、不正確な高さ/不透明度を保持できることです。

Answer 4

問題は、CSSが任意のポイントで停止することによって混乱するということです。

fadeIn()、​​、slideUp()とslideDown()新しいものに現在の状態から移動し、それに戻す - ない元のCSSに。

.stop（）の後に続行するには、CSSを使用可能な状態に戻すか、アニメーションターゲットをより明確に指定する必要があります。

アニメーションを停止するときに、すべてを任意の状態にするのではなく、最後にジャンプするようにして、CSSを正しい位置に配置することができます。

UPDATE：あなたがいない場合、それはあなたがそれを実行する方法を正確ではないかもしれませんhttp://jsfiddle.net/hWTT6/5/

が、トリック：

はあなたのデモのこのアップデートでは、コードを見てみましょうアニメーションがそのコースを走らせたいのであれば、あなたが望むやり方でアニメーションを元の状態に戻すことができます。

$(function() { 
    $('#fade') 
    .mouseenter(function() { 
     $('#fg_fade').stop().animate({ 'opacity': 0 }, 'slow', function() { 
      $('#fg_fade').css('height', '100%'); 
     }); 
    }) 
    .mouseleave(function() { 
     $('#fg_fade').stop().animate({ 'opacity': 1, 'height': '100%' }, 'slow'); 
    }); 

    $('#slide_fire') 
    .mouseenter(function() { 
     $('#fg_fade').stop().animate({ 'height': 0 }, 'slow', function() { 
      $('#fg_fade').css('opacity', 1); 
     }); 
    }) 
    .mouseleave(function() { 
     $('#fg_fade').stop().animate({ 'height': '100%' }, 'slow', function() { 
      $('#fg_fade').css('opacity', 1); 
     }); 
    }); 
}); 

Answer 5

問題が途中fadeInによって引き起こされる、fadeOutなどの仕事。 0と1の間でフェードすることを期待するかもしれませんが、現実には、0と、「ベースライン」の不透明度が何であってもフェードします。

http://jsfiddle.net/hWTT6/7/

あなたは、私が.5に初期不透明度を設定するに気づくでしょう：あなたはここにこれを見ることができます。今私がfadeInと呼ぶとき、それは1に完全にフェードしません。.5の私のベースラインにフェードします。アニメーションを途中で停止すると問題が発生します。停止した時点の不透明度が「ベースライン」になります。今度はfadeInをmouseleaveに呼び出すと、この新しいベースラインにフェードしようとしていて、すでにそこにあることがわかります。あなたがslideの上にマウスを置いた後、ハーフウェイアニメーションを通してそれを削除した場合、それが途中で停止します

http://jsfiddle.net/hWTT6/8/（オリジナル、しかし.stop付き）

：あなたはここに行くことによって示され、これを見ることができます。マウスをslideに戻し、アニメーションが完了するのを待ちます。マウスを削除すると、最初のアニメーションが停止した場所にスライドすることがわかります。それはこれが新しい「ベースライン」であるからです。

これを解決する方法は、実際にはfadeIn,fadeOutなどをより明示的なアニメーションに置き換えることです。私は0または1すべての作品にフェードすることを言っておりますのでこと

http://jsfiddle.net/hWTT6/6/

お知らせ：たとえば、0間と1をフェードすることを伝えるためにfadeToを使用しています。同様のことは、とslideDownの代わりにanimateを使用してもかまいません。