如何取消jQuery鼠标保存操作

Question

我想让div在鼠标滑出时滑回到开始位置，但如果鼠标再次滑过div，我想让div取消该操作并返回到展开位置。

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

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

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

Answer 1

好了，终于把这件事搞清楚了。用户点击切换。Div打开。用户离开div。它等待700ms，然后关闭。如果用户中断它的关闭，它将重新打开。如果用户没有中断，它会重置。

注意：.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);
});

Answer 2

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

因为您想要在当前位置停止动画，而不是快速完成它，所以需要使用

.stop(true, false)

在你的元素上。

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

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

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