jQuery：单击时，阻止mouseenter事件

Question

我有两个独立的动画正在发生，其中一个在mouseenter上触发，另一个在click上触发。问题是，当它们都被激活时，它会创建一个跳动的动画。

你可以明白我的意思是：JSFiddle

是否有可能阻止mouseenter事件从如果click事件被激活时发生的？

的Javascript

$('header h1').mouseenter(function() { 
    $('header:not(.open)').delay(500).animate({ 
    'padding-bottom': '40px' 
    }, 150, function() { 
    //function complete 
    }); 
}); 

$('header h1').mouseleave(function() { 
    $('header:not(.open)').animate({ 
    'padding-bottom': '20px' 
    }, 150, function() { 
    //function complete 
    }); 
}); 

$('header h1').click(function() { 

    if ($('header').hasClass('open')) { 
    $('header p').fadeOut(100); 
    $('header').removeClass('open').animate({ 
     'padding-bottom': '20px' 
    }, 300, function() { 
     //animation complete 
    }); 
    } 

    else { 
    $('header').addClass('open').animate({ 
     'padding-bottom': '150px' 
    }, 300, function() { 
     $('header p').fadeIn(); 
    }); 
    } 

});​ 

Answer 1

似乎更容易只是这样做：

$('header').on({ 
    mouseenter: function(e) { 
     if (!$(this).is('.open')) { 
      $(this).stop(true, true).delay(500).animate({'padding-bottom': '40px' }, 150, function() { 
       //function complete 
      }); 
     } 
    }, 
    mouseleave: function(e) { 
     if (!$(this).is('.open')) { 
      $(this).stop(true, true).animate({'padding-bottom': '20px'}, 150, function() { 
      //function complete 
      }); 
     } 
    }, 
    click: function() { 
     if ($(this).is('.open')) { 
      $(this).find('p').fadeOut(100).end().removeClass('open').stop(true, true).animate({'padding-bottom': '20px'}, 300, function() { 
       //animation complete 
      }); 
     }else{ 
      $(this).addClass('open').stop(true, true).animate({'padding-bottom': '150px'}, 300, function() { 
       $('p', this).fadeIn(); 
      }); 
     } 
    } 
});​ 

Answer 2

不，你不能。特别是因为这些事件是基于彼此的：要点击一个元素，您需要使用鼠标输入它：您不能停用点击时已经发生的事件enter。而且你显然不应该在进入时关闭未来的事件click。

跳转动画问题的解决方案应该是stop() method，它会在选定的元素上结束运行动画。

Answer 3

如何在延迟后检查open类。

从

$('header h1').mouseenter(function() { 
    $('header:not(.open)').delay(500).animate({ 
    'padding-bottom': '40px' 
    }, 150, function() { 
    //function complete 
    }); 
}); 

更改为

$('header h1').mouseenter(function() { 
    $.delay(500); 
    $('header:not(.open)').animate({ 
    'padding-bottom': '40px' 
    }, 150, function() { 
    //function complete 
    }); 
}); 

很明显，你可以微调延迟根据自己的喜好，但想法是这样的：

如果他们不这样做点击前x毫秒，增加填充。

Answer 4

听起来像你需要.stop()。

添加到您的click事件的开始：

$('header').stop(true) 

第一个参数为真为clearQueue，它会清除你的动画队列。

看到这个jsFiddle。