使用延迟在中间暂停jquery动画。 有一些问题

Question

    $('textarea.contact').click(function(){
    $(this).animate({"backgroundPosition": "+=350 -=150"}, 500).delay(500);
    $(this).animate({"backgroundPosition": "+=350 -=150"}, 500);
});

我正在使用背景位置库来设置背景动画。 我想将背景幻灯片放到一半。 在中间暂停一下，然后继续前进。 不幸的是，当我以这种方式编写代码时，动画会移动一半。 在中间暂停，然后从头开始而不是从头开始重新播放动画。 有人知道为什么吗？

Answer 1

也许使用像这样的回调函数：

$(this).animate({"backgroundPosition": "+=350 -=150"}, 500, function () {
    $(this).delay(500).animate({"backgroundPosition": "+=350 -=150"}, 500);
});

听起来有点像在初始动画后没有保存背景图片的CSS，所以可以在回调函数中设置CSS：

$(this).animate({"backgroundPosition": "+=350 -=150"}, 500, function () {
    $(this).css({"backgroundPosition": '...'});
    $(this).delay(500).animate({"backgroundPosition": "+=350 -=150"}, 500);
});

Answer 2

有点像骇客的方法，但是不动手动画：

$( this )
    .animate({"backgroundPosition": "+=350 -=150"}, 500)
    .animate({"backgroundPosition": "+=0 +=0"}, 500)
    .animate({"backgroundPosition": "+=350 -=150"}, 500);

jsfiddle具有不同的规则，因为我不想找到背景图像。