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

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()是用于 -但我真正想要做的仅仅是清除队列并让当前动画完成,同时加入了淡出动画队列.

有任何想法吗？

PS我也试过这个.clearQueue()方法,但这表现出类似的行为.

编辑:我真的应该提到的东西 - 我需要元素在光标结束时保持淡入 - 所以在animate函数上使用回调不会解决它.我已经更新了代码,使其更加明显.对不起任何困惑.

Answer 1

您可以使用animate方法的完整回调来执行fadeOut:

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

更新

可以使用类似的方法设置一个标志,以确保动画停止,然后在mouseout/fade完成后的淡出时淡出:

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