jquery - 使用延迟在中间暂停 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);
});