Question

当我的鼠标熄灭时，我想让我的div滑回到开始位置，但我希望我的div取消该操作，如果鼠标再次返回div，则返回其展开位置。

我需要一些方法来阻止这个行动：

    $(".logo").mouseleave(function(){
            $(".logo").animate({top: '-65px'}, 'slow')
    });

这是小提琴：http://jsfiddle.net/gaPah/6/

Answer 1

.stop()就是你问题的答案！

因为你想要停止动画而不是快速完成动画，你想要使用

.stop(true, false)

关于你的元素。

以下是适用于您案例的停止演示（）：http://jsfiddle.net/Ma5Xt/1/

这是添加了延迟的示例：http://jsfiddle.net/Ma5Xt/2/

最后，只有当关闭动画当前正在运行时，才允许在mouseenter上进行扩展。否则，您需要再次单击div重新打开：http://jsfiddle.net/Ma5Xt/3/

Answer 2

好吧终于到了最底层。用户点击切换。 Div打开。用户离开div。它等待700毫秒然后关闭。如果用户中断关闭，则重新打开。如果用户没有中断，则重置。

NB。 .delay()与.animate()的效果不佳，所以它变得复杂，但我相信会有更简单的方法来做到这一点。

另请注意，我已绑定自定义事件openme以避免两次写入相同的动画行（一次鼠标悬停，一次点击按钮）。

Working demo

$('#btn_panel').click(function(event){
  $(".logo").trigger('openme');
});

$('.logo').on('openme', function(){
  $(this).stop().animate({top: 0}, 700);
}).on('mouseenter', function(){
  clearTimeout($(this).to);
  if (parseInt($(this).css('top'))>-65){
      $(this).trigger('openme');
  }
}).on('mouseleave', function(){
  var el=$(this);
  $(this).to=setTimeout(function(){
    el.animate({top: -65}, 700);
  },700);
});

如何取消jQuery mouseleave动作

2 个答案: