Question

我有两个单独的动画正在发生，一个在mouseenter click mouseenter上发生。问题是当它们都被激活时会产生一个跳跃的动画。

你可以在这里看到我的意思：JSFiddle

如果click事件被激活，是否可以阻止$('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(); }); } });事件发生？

的Javascript

{{1}}

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)

true的第一个参数是clearQueue，它将清除动画队列。

请参阅此jsFiddle。

jQuery：点击后，阻止mouseenter事件

4 个答案: