jquery - jqueryホバーイベントの使用

Question

要素にカーソルを合わせると発生する jquery ホバー イベントがあります。問題は、要素の上に何度もホバーすると、イベントがキューに入れられ、要素の上にホバーしてホバーする速度と時間に応じて、要素が点滅したままになることがあります。このキューイングをなくすために、イベントの伝搬を停止したいと考えています。

$('.pui-search-item').hover( function() {
        $(this).find('.pui-actions').show('fade');
    }, function(){
        $(this).find('.pui-actions').hide('fade');

    });

これについてどうすればよいでしょうか。さまざまな伝播機能を試してみましたが、効果はありませんでした。

前もって感謝します。

Answer 1

Try this:

$('.pui-search-item').hover( function() {
        $(this).find('.pui-actions').stop(true, true).show('fade');
    }, function(){
        $(this).find('.pui-actions').stop(true, true).hide('fade');

    });

Here is more info about stop() http://api.jquery.com/stop/

Answer 2

アニメーションの前に関数呼び出しを追加してstop(true)、キューをリセットします。

Answer 3

このリンクを試してください。

実装は次のように変更されます。

$('.pui-search-item').hover(function() {
  $(this).find('.pui-actions').stop(true, true).fadeOut();
}, function() {
  $(this).find('.pui-actions').stop(true, true).fadeIn();
});