Question

当鼠标开启时，以及鼠标离开元素时，我使用此代码在两个图像之间淡入淡出。当鼠标移动太快时，这会产生一些不合适的过渡。如何防止？

我的代码：

$('.prods li').live('mouseenter',function() {
    $(this).children('.label').stop().animate({top: '80%',opacity: 1}, 800, 'easeOutQuint');
    if ($(this).children('.producthover').length) {
        $(this).children('.product').fadeOut(800);
        $(this).children('.producthover').fadeIn(800);
    }
}).live('mouseleave',function() {
    $(this).children('.label').stop().animate({top: '50%',opacity: 0}, 800, 'easeOutQuint');
    if ($(this).children('.producthover').length) {
        $(this).children('.product').fadeIn(800);
        $(this).children('.producthover').fadeOut(800);
    }
});

Answer 1

您是否尝试将.stop()更改为.stop(true,true)？

Answer 2

您可以检查意图。

基本上你需要延迟动画的执行，以确保在最短时间内没有发生其他动作。

var mouseEnterTimer = null;

$('.prods').on('mouseenter', 'li',  function(){

   /*clear timer since another mouseenter has occured within 200 ms */
   clearTimeout(mouseEnterTimer); 


   /*now queue up another one to execute 200 ms later*/
   mouseEnterTimer = setTimeout)function(){
      //all your animation logic here

   }, 200); 
});

即使鼠标快速移入和移出相关区域，也可以确保事件仅触发。

您可能希望进一步了解debouncing events。（以及它们如何different from throttling）

此外，还有一个很好的hoverIntent plugin（等等）。

如何在快速鼠标移动时防止多个事件？

2 个答案: