jQuery干扰其他jQuery脚本

我正在一个特别沉重的jQuery网站上有很多动画。jQuery干扰其他jQuery脚本

有此脚本，其控制背景云（其中6）：

function moveClouds(e, s, d) { 
$(e).css('left', '-20%'); 
    var wait = window.setTimeout(function(){ 
     $(e).animate ({ 
      right: '120%' 
     }, s, 'linear', function() { 
     moveClouds(e, s, d); 
    }); 
},d); 
} 

if(!Modernizr.cssanimations) { 
var clouds = [1,2,3,4,5,6]; 

$.each(clouds, function() { 
    var e = $('.cloud-' + this); 
    moveClouds(e, e.data('speed'), e.data('delay')); 
}); 
}

有这一个使气球盘旋以及其它元件（它们中的12）：

function runIt(element, hoverAmount) { 
     element.animate({top: '+=' + hoverAmount}, 1000); 
     element.animate({top: '-=' + hoverAmount}, 1000, function() { 
      runIt(element, hoverAmount); 
     }); 
    } 

    $('.balloon').each(function() { 
     var hoverAmount = 15 + Math.floor(Math.random() * 5); 
     //console.log(hoverAmount); 
     runIt($(this), hoverAmount); 
    });

等移动对象，淡入淡出的东西等。

现在的问题是，更多的内容被添加和图像云和气球现在干燥并不再流畅。我很新的jQuery，所以我的问题是：

有没有办法让他们不冲突？使用更少的资源并顺利运行？

来源

2014-07-25 DannieCoderBoi

[** Greensock GSAP **]（https://www.greensock.com/gsap-js/） – adeneo

你可以看看使用CSS动画而不是使用jQuery。 – Martin

就像上面的注释所述，最好不要在很多复杂的同时动画中使用jQuery。

Greensock使用CSS变换来移动物体。您也可以编写自己的CSS转换。这些使用硬件加速，并将更快，更平滑地动画您的对象。

来源

2014-07-25 11:15:44 Kokodoko

是的，我想你会发现GSAP (GreenSock Animation Platform)作品很多更好。这实际上高达比jQuery快20倍。另外，我建议动画x/y而不是上/左/右，因为转换不会影响文档流，因此可以更快地呈现。此外，请尝试将force3D:true添加到您的GSAP动画中，这会将这些元素置于其自己的合成器图层上。

随着GSAP，您可以循环/ YOYO动画，巢他们，seek()到一定点，reverse()，改变timeScale，以及更多。 jQuery只是没有为严肃的动画而建造。

噢，如果可以的话，我会避免做大量的setTimeout()调用。当他们堆积起来时，这些可能会花费很多。 GSAP有一个delayedCall()方法，它与单个中央股票挂钩并且在压力下更有效率。

您可能还需要阅读这篇文章：http://css-tricks.com/myth-busting-css-animations-vs-javascript/

如果您需要帮助GSAP，有专门的论坛，在http://forums.greensock.com

快乐渐变！

来源

2014-07-25 21:20:02 Jack

jQuery干扰其他jQuery脚本

回答

相关问题