2011-06-24 42 views
3

これはjavascript/jQueryの一般的な使用例であると想像しなければならないので、サイトの他の場所にいる場合は私を許してくださいこの基本的な使用例は見つかりませんでした。最も簡単な一連のjavascript/jQueryイベントの最新のものを守る最も簡単な方法

私は目に見えるdiv(A)を持っています。そのdivをホバリングすると他のdivが表示されます(B & C)。これらのdiv(A、B、またはC)のいずれかをアンハングすると、表示された2つのdiv(B & C)が非表示になります。

十分に単純ですが、問題は、イベントがすべてスタックしてからしばらくの間、アコーディオンのように動作するため、簡単な動作では、あなたが素早く連続して何回かホバーしたりアンホバリングしたりすると、醜いことが起こるということです。

私は式にtypewatch機能を持ってみました:

var typewatch = (function(){ 
     var timer = 0; 
     return function(callback, ms){ 
     clearTimeout (timer); 
     timer = setTimeout(callback, ms); 
     } 
    })(); 

しかし、私はそれを正しく使用することができませんでした、私は(おそらく私は自分自身typewatch呼び出す単一のカスタムトグル機能を呼び出す必要があります推測します、 か何か?)。理解を容易にするため

、ここでは正確な例jsfiddleです: http://jsfiddle.net/tchalvakspam/KG3P9/7/

しかし、一般的に言えば、どのように私は複数のイベントをキャッチし、唯一の最新のものを尊重することができますか?

+0

あなたはjQueryのネイティブアニメーション能力を使用して(より具体的には[ '.stop()'](http://api.jquery.com/stop/))していないので... –

+0

この物は、とにかくコード化されていません... Aを離れるときには、あなたはBに行くためにaccordioningしていますか? –

+0

おっと、ええ、私はaからbへの移動が問題を起こすことに気がついたので、フッタコンテナ全体をトリガする必要があります。 – Kzqai

答えて

1

これは実際には私を悩ませていたものです。アニメーションを作成する前に、$.stop()に電話をかけて、現在のアニメーションをトラックに残し、新しい目標を指定してピックアップします。

$("#container") 
    .mouseenter(
    function(){ 
    $(".panels", this).stop(true, true).slideDown(); 
    }) 
    .mouseleave(
    function(){ 
    $(".panels", this).stop(true, true).slideUp(); 
    } 
); 

これは、単一の画像を用いて、同様の例を提示するように$.stop()方法自体にjQueryのAPIで提供されるドキュメントに従います。

デモ:http://jsbin.com/adeqef/2/edit

+0

マウスの上をマウスで動かすと完全ではありませんが、現在のユースケースでは十分に機能します。 – Kzqai

+0

@Tchalvakそれは間違いなく完璧ではないが、ほぼそこにある;) – Sampson

+0

うん。ここで私は自分の手にシンプルなユースケースがあったと思った...:p – Kzqai

2

e.preventDefault()をjQueryイベントとともに使用して、イベントがツリーを伝播するのを止めます。

関連する問題