jquery - 如何停止()动画但允许当前动画完成

Question

使用 jQuery 1.7.2

$(function(){
    $('#parentElem').mouseenter(function(){
        $('.myElem').animate({opacity:1}, 'fast');
    }).mouseleave(function(){
        $('.myElem').stop().animate{opacity:0}, 'slow');
    });
});

在此示例中，我有一个元素在 mouseenter 事件上淡入，然后停止并再次淡出(在 mouseout 上)以产生颤动效果。

但是我有一个问题 - 使用 .stop() 方法，当前运行的动画将被中断并再次淡出 - 我的“颤动”效果并没有真正起作用。当然，这正是 .stop() 的用途 - 但是我真正想做的只是清除队列并让当前动画完成，同时添加淡入淡出将动画输出到队列。

有什么想法吗？

P.S 我也尝试过 .clearQueue() 方法，但这表现出类似的行为。

编辑:我确实应该提到的事情 - 我需要元素在光标悬停在元素上方时保持淡入状态 - 因此在 animate 函数上使用回调无法解决这个问题。我更新了代码以使其更加明显。抱歉造成任何困惑。

Answer 1

您可以使用complete callback of the animate method执行淡出:

$('.myElem').animate({opacity:1}, 'fast', function() {$(this).stop().animate{opacity:0}, 'slow');});

更新

可以使用类似的方法设置一个标志，以确保动画停止，然后在鼠标移出/淡入完成后淡出:

(function() {
  var doFadeOut = false;
  var fadeOut = function() {
    if (doFadeOut) {
        $('.myElem').stop().animate({ opacity: 0 }, 'slow');
        doFadeOut = false;
    } else {
        doFadeOut = true;
    }
  };
  $('#parentElem').mouseenter(function() {
    $('.myElem').animate({ opacity: 1 }, 'fast', fadeOut);
  }).mouseleave(fadeOut);
}())