6

我有两个单独的动画正在发生，一个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();
    });
  }

});​
4

4 回答 4

4

这样做似乎更容易：

$('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();
            });
        }
    }
});​
于 2012-05-28T18:47:59.730 回答
2

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

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

于 2012-05-28T18:21:01.277 回答
0

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如果他们在毫秒前没有点击，增加填充。

于 2012-05-28T18:21:23.420 回答
0

听起来你需要.stop()。

将此添加到click活动的开头：

$('header').stop(true)

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

看到这个jsFiddle。

于 2012-05-28T18:23:43.413 回答