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

发布于 2024-12-04 07:43:33 字数 320 浏览 1 评论 0原文

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

我正在使用背景位置库来制作背景动画。我想要背景幻灯片一半。中间停顿一下，然后继续前行。不幸的是，当我以这种方式编写代码时，动画移动了一半。在中间暂停，然后从头开始而不是递增动画。有人知道为什么吗？

原文

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

I'm using a background position library in order to animate a background. I would like to have the background slide half way. Pause in the middle, and then continue on it's way. unfortunately when I write the code this way the animation moves half way. pauses in the middle, and then restarts the animation from the beginning rather than incrementing. anyone know why?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

眸中客 2024-12-11 07:43:33

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

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

Perhaps use a callback function like so:

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

It kinda sounds like the css for the background image is not being saved after the initial animation, so maybe set the css in the callback function:

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

回复收藏 0 原文

￡冰雨忧蓝° 2024-12-11 07:43:33

有点像黑客方法，但是在不移动的情况下制作动画怎么样：

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

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

Sort of a hacking approach, but what about animating without moving:

$( 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.

回复收藏 0 原文

~没有更多了~