jQuery：點擊后，阻止mouseenter事件

Question

我有一個正在發生的兩個不同的動畫，一個火災mouseenter其他的click 。 問題是，當它們都被激活時，它會創建一個跳躍動畫。

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

如果click事件被激活，是否可以防止發生mouseenter事件？

使用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()方法 ，該方法結束在所選元素上運行動畫。

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 。