ループを防止するjQuery

Question

jQueryでスクロールアップするためにこのスクリプトを作成しましたが、マウスオーバーやマウス出力を複数回実行すると、そのスクリプトがループするたびにループが終了します。

私はすでに解決策を検索してみましたが、私はそれを整理していない、ここでのコードは次のとおりです。

$(document).ready(function(){ 

    $('.desc').hide(); 

    $('.work').mouseover(function(){ 
     $('.desc', this).slideDown('900'); 
    }); 

    $('.work').mouseleave(function(){ 
     $('.desc', this).slideUp('900');  
    }); 
}); 

Answer 1

読む（そのキューをクリアし、予告引数の両方としてtrueを渡す、.stop()を使用してみてください詳細についてはドキュメントを参照）、最後にジャンプします。あなたは、現時点では

$(document).ready(function(){ 

    $('.desc').hide(); 

    $('.work').mouseover(function(){ 
     $('.desc', this).stop(true,true).slideDown('900'); 
    }); 

    $('.work').mouseleave(function(){ 
     $('.desc', this).slideUp('900');  
    }); 
}); 

Answer 2

に直面しているとあなたは同じ動作に直面するように、引数はアニメーションがキューに入れられ、実行されるように、trueを渡していけない場合は、各アニメーション（slideUpとslideDown）前stop()を追加する必要があります。この小さな関数は、アニメーションキューに新しいアニメーションを追加する前にアニメーションを停止します。

Answer 3

各アニメーションの前にstop()を追加すると、アニメーションキューがクリアされます。 http://api.jquery.com/stop/

$(document).ready(function(){ 

    $('.desc').hide(); 

    $('.work').mouseover(function(){ 
     $('.desc', this).stop().slideDown('900'); 
    }); 

    $('.work').mouseleave(function(){ 
     $('.desc', this).stop().slideUp('900');  
    }); 
}); 

Answer 4

.stop()は紙に役立ちますが、アニメーションは、まだぎくしゃくした動きになります。あなたが実際に探しているのは、ユーザが.work要素の上を実際に「ホバリング」したときに、アニメーションをトリガするための遅延ホバーイベントです。そのためのいくつかのjQueryプラグインがあります。 hoverIntent - sampleを試してみてください。あるいは、自分で書くこともできますが、これはあまり難しくありません。

また、FYI 900はほぼ完全な秒です。これは丁寧なアニメーションよりも長いです。