Question

我有以下代码为延迟800毫秒的对象设置动画：

$('#navMenu').mousemove(function (e) {
        thisX = e.pageX

        if (thisX >= 1625) {
            $('#prbBtnHolder').animate({ left: '-=150' }, 300).delay(800);
        }
});

如果#prbBtnHolder具有某个css left属性，我希望能够删除delay()方法并停止动画。我该怎么做呢？这是我到目前为止所尝试的：

//...
$('#prbBtnHolder').animate({ left: '-=150' }, 300).delay(800);
if ($('#prbBtnHolder').css('left') < -100) {
     $(this).animate({left: '-=0px'});
}

但是这不会删除delay方法，也不会达到预期的效果。还有其他想法吗？

Answer 1

为了清除效果队列，您需要使用步骤回调查看是否符合条件。

http://api.jquery.com/animate/

$('#prbBtnHolder').animate({
  left: '-=150'
},    
{
  duration: 300,
  step: function(now, fx) {
    if (now < -100) {
      // uncomment and you'll see the next animation
      $(fx.elem).clearQueue().stop();            
    }
  }
}).delay(800).animate({ width: '200px', height: '200px' }, 300);

这是一个jsbin示例：

http://jsbin.com/utejew/3

Answer 2

<强> $(this).clearQueue();
jQuery Docs for clearQueue

删除给定Element的效果队列中的所有元素。否则，您可以使用js native setTimeout函数来设置动画，可以使用clearTimeout轻松清除。

在您动画$('#prbBtnHolder')之前，您可以计算按钮远离-100的距离，并仅在远处设置动画。

如何使用回调或其他方法删除方法

2 个答案: