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 with different rules, because I didn't want to find a background image.

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

2 个答案: