1

こんにちは、

次のコードを使用して、li要素内にあるリンクを表示しています。制約は、マウスがli要素に入ると、3秒以内に留まる場合は、表示する必要があります。li要素から離れると、重要性がなくなるはずです。このために、私は使用しています：

var showTimeOut;
var thisElement

$('.user-list li').live('mouseover',function(){

    thisElement = $(this).children('a.copier-link');

    showTimeOut = setInterval(function(){
        thisElement.css({'display':'block'});
    },3000);
})

$('.user-list li').live('mouseleave',function(){
    clearInterval(showTimeOut);
    thisElement.hide();
})

それはうまくいきます。しかし、問題は、li要素を1秒で交差させている間、間隔でさえ呼び出して、リンクを表示していることです。しかし、表示する必要があるのは、3秒以内に留まり、その後非表示にする必要がある場合、再び3秒に留まる場合です。

私のコードに何か問題がありますか？そうでなければ、誰かが私に最高の提案をしますか？

ありがとう。

4

2 に答える 2

1

これは推測にすぎませんが、 のmouseover代わりに を使用している可能性がありますmouseenter。 mouseover要素内に子要素がある場合、複数回発生する可能性があります。これにより、間隔が複数回設定され、変数liの値が上書きされます。showTimeoutこれは、mouseleave発火時に、最後に設定された間隔のみがクリアされることを意味します。

代わりにmouseoverイベントを変更してみてください。ここで 3 秒ごとに繰り返される関数を実行するようにタイマーを設定し、不必要に再度 を適用するため、 に変更するmouseenterことも検討します。 関数は 1 回だけ呼び出されます。setIntervalsetTimeoutsetInterval.css()setTimeout

もう 1 つのアイデアは、常にclearTimeoutbeforeを呼び出すsetTimeoutことです。そうすれば、2 つのタイマーを同時に実行できないことがわかります。

clearTimeout(showTimeout);
showTimeOut = setTimeout(function(){
    thisElement.css({'display':'block'});
},3000);
于 2010-04-27T09:51:03.363 に答える
0

hoverIntent jQuery Plug-Inが探しているものではないでしょうか?

hoverIntent は、マウスの動きだけで水晶玉のように、ユーザーの意図を判断しようとするプラグインです! これは、jQuery の組み込みのホバーのように機能します (そして派生したものです)。ただし、onMouseOver 関数をすぐに呼び出すのではなく、ユーザーのマウスの速度が十分に低下するまで待ってから呼び出しを行います。

于 2010-04-27T09:47:57.160 に答える