關於mouseover和mouseleave重複功能？

我有一個功能，我嘗試寫，顯示懸停工具提示，並淡出出來的鼠標離開：關於mouseover和mouseleave重複功能？

$('.tt').mouseover(function(e) { 
    var tip = $(this).find('.tooltip');    
    //Set the X and Y axis of the tooltip 
    $('.tooltip').css('top', 0); 
    $('.tooltip').css('right', -200); 
    tip.fadeIn('500'); 
}).mouseout(function(e) { 
    var tip = $(this).find('.tooltip'); 
    tip.fadeOut('500'); 
});

如果用戶變得不穩定鼠標懸停和多次提示閃爍，本質上。有沒有辦法阻止這種情況？

來源

2013-02-14 Liam

10分鐘的答案...我們是一羣禿鷹。 – 2013-02-14 14:44:29

您正在尋找.stop([clearQueue ] [, jumpToEnd ])。

tip.stop(true, true).fadeIn(500); 
tip.stop(true, true).fadeOut(500);

你可以找到更多關於.stop()here。

來源

2013-02-14 14:43:23

我不是OP，但我最喜歡你的。感謝您發佈鏈接到API並提供可選參數。 – 2013-02-14 14:48:36

**這不是要走的路**，還有其他你應該知道的事情。對更快的鼠標移動的影響幾乎是光滑的http://jsbin.com/araqiv/3/edit – 2013-02-14 15:18:15

我半路同意@roXon。這是按照OP的要求。它可以防止jQuery動畫的非常流行的動畫堆疊（這使得人們常常錯誤地認爲它是錯誤的），但它確實存在一些混亂。然而，這可能是開發者所追求的。它對鼠標操作的反應比羅克森指出的正確方式更能反應。我認爲這兩種方法都是有效的，但我認爲我贊成羅克森指出的技術上正確的方法。 – 2013-02-14 20:30:55

使用tip.stop().fadeIn()和tip.stop().fadeOut()

來源

2013-02-14 14:42:17 d4rkpr1nc3

加入終止（） - http://api.jquery.com/stop/

$('.tt').mouseover(function(e) { 

    var tip = $(this).find('.tooltip'); 

    //Set the X and Y axis of the tooltip 
    $('.tooltip').css('top', 0); 
    $('.tooltip').css('right', -200); 
    tip.stop().fadeIn(500); 

}).mouseout(function(e) { 

    var tip = $(this).find('.tooltip'); 
    tip.stop().fadeOut(500); 

});

來源

2013-02-14 14:42:17

.stop（）在你的情況下會部分完成這項工作。關於如何取得最佳結果還有其他的事情。這裏是你提供的答案的演示：http://jsbin.com/araqiv/2/edit **這不是我會建議做的** – 2013-02-14 15:05:00

爲什麼不呢？你會如何改善？ – 2013-02-14 15:07:52

改進？你不能使用'fadeIn（'500'）'而不是'fadeIn（500）'而不是'mouseover'和'mouseout'的東西不是最合適的，但你應該知道。這是我的改進，但它實際上反映了我的答案：http://jsbin.com/araqiv/4/edit。所以你的例子不但不能順利運行，而且也是錯誤的。（並有2個upvotes ...） – 2013-02-14 15:16:29

這可能會奏效，請嘗試使用.stop（）

tip.stop().fadeOut('500');

來源

2013-02-14 14:42:31 Anton

您可能要檢查出HoverIntent插入。

這是爲了防止一些抖動。

同樣感興趣的是本Alman對Throttling and Debouncing文章。

來源

2013-02-14 14:43:02

LIVE DEMO

當然，使用.stop()方法和mouseenter mouseleave

$('.tt').on('mouseenter mouseleave', function(e) { 

    var elOpacity = e.type=='mouseenter' ? 1 : 0 ; 
    var $tip = $(this).find('.tooltip'); 

    $('.tooltip').css({top: 0, right: -200 }); 
    $tip.stop().fadeTo(500, elOpacity); 

});

上面例子中的.on()方法允許你創建的事件我們 '名單'感興趣的，
比條件運算符（Tern ary(?:)）我們監聽e（事件）的變化併爲元素不透明度指定一個值，將它傳遞給.fadeTo()動畫方法。
.stop()將結束前一個動畫而不創建動畫堆積。

來源

2013-02-14 14:43:36

僅僅爲那些不在乎解釋他的動作的令人驚歎的@downvoter添加了一個演示。 – 2013-02-14 15:01:25

哈哈討厭的人會討厭。對不起，你的答案被降低了，兄弟。感謝您的有益補充。希望它能夠獲得足夠的提示，讓未來的訪問者更容易看到。 – 2013-02-14 20:27:03

嘗試實際進入/離開 - 如果針尖地方.TT失去顯示提示，當集中可能無法正常工作。

添加一個停止，簡化一個對象的CSS。

$('.tt').mousenter(function(e) { 
    var tip = $(this).find('.tooltip'); 
    //Set the X and Y axis of the tooltip 
    tip.css({'top':0,'right': -200}); 
    tip.stop().fadeIn('500'); 
}).mouseleave(function(e) { 
    $(this).find('.tooltip').stop().fadeOut('500'); 
});

來源

2013-02-14 14:44:37

關於mouseover和mouseleave重複功能？

回答

相關問題