jquery - 如何取消 jQuery mouseleave 动作

Question

我希望我的 div 在鼠标熄灭时向上滑回起始位置，但我希望我的 div 取消该操作并在鼠标再次回到 div 上方时返回其展开位置。

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

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

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

Answer 1

.stop()是您问题的答案！

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

.stop(true, false)

在你的元素上。

这是适用于您的案例的 stop() 演示：http: //jsfiddle.net/Ma5Xt/1/

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

最后，仅当当前正在运行关闭动画时，此选项才允许在 mouseenter 上展开。否则需要点击 div 重新打开：http: //jsfiddle.net/Ma5Xt/3/

Answer 2

好的，终于明白了这一点。用户点击切换。分区打开。用户离开 div。它等待 700 毫秒然后关闭。如果用户中断它关闭它会重新打开。如果用户没有中断，它会重置。

注意。.delay()不能很好地配合，.animate()所以它变得复杂，但我相信会有更简单的方法来做到这一点。

另请注意，我绑定了自定义事件openme以避免两次编写相同的动画线（一次在鼠标悬停时，一次在单击按钮时）。

工作演示

$('#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);
});