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

这样做似乎更容易：

\n\n

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

\n