我怎样才能使它成为更好的递归动画 jQuery 脚本？

发布于 2024-10-12 12:32:09 字数 460 浏览 1 评论 0原文

这个想法是为云 div 制作动画并让它永久地水平来回动画。这是可行的，但不幸的是我认为它很容易出现内存泄漏和 UI 滞后。任何建议将不胜感激，谢谢。

function animateCloud() {
    $('#cloud').animate({ right: '+=500' }, { duration: 35000, easing: "linear", queue: true });
    animateOpposite();
}

function animateOpposite() {
    $('#cloud').animate({ right: '-=500' }, { duration: 35000, easing: "linear", queue: true });
    animateCloud();
}

$(document).ready(function() {
    animateCloud();
});

原文

The idea is to animate a cloud div and to have it animate back and forth horizontally in perpetuity. This works, but unfortunately I think it's prone to memory leaks and UI lag. Any advice would be appreciate, thanks.

function animateCloud() {
    $('#cloud').animate({ right: '+=500' }, { duration: 35000, easing: "linear", queue: true });
    animateOpposite();
}

function animateOpposite() {
    $('#cloud').animate({ right: '-=500' }, { duration: 35000, easing: "linear", queue: true });
    animateCloud();
}

$(document).ready(function() {
    animateCloud();
});

分享到QQ

分享到微博

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

发布评论

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

话少心凉 2024-10-19 12:32:09

我认为您的代码根本不会泄漏内存，但您可以创建更短的调用。

function animateCloud() {
    $('#cloud').animate({ right: '+=500' }, { duration: 35000, easing: "linear" })
               .animate({ right: '-=500' }, { duration: 35000, easing: "linear", complete: animateCloud });
}

示例： http://www.jsfiddle.net/bh3f4/

I don't think that your code leaks memory at all, but you can create the call shorter.

function animateCloud() {
    $('#cloud').animate({ right: '+=500' }, { duration: 35000, easing: "linear" })
               .animate({ right: '-=500' }, { duration: 35000, easing: "linear", complete: animateCloud });
}

example: http://www.jsfiddle.net/bh3f4/

回复收藏 0 原文