JQuery的动画（增加IMG的宽度）平滑

所以我想进出影响的一面旗帜图像JQuery的动画（增加IMG的宽度）平滑

效果的作品创造一个非常缓慢变焦，但动画是非常非常不连贯。无论如何要改善效果更平滑吗？ Img默认为1000像素，所以zoomIn函数的尺寸增加了30％。在50000ms的时候，它相当平滑，但为了达到预期的效果（不要太分散给页面内容的浏览者），我希望它是100000-200000ms。

感谢您提供任何帮助！

$bannerImg = $('img'); 

    function zoomIn(){ 
    $bannerImg.animate({ 
     width: '+=300', 
     }, 100000,'linear'); 
    $bannerImg.promise().done(zoomOut); 
    } 

    function zoomOut(){ 
    $bannerImg.animate({ 
     width: '-=300', 
     }, 100000,'linear'); 
    $bannerImg.promise().done(zoomIn); 
    } 

    zoomIn();

来源

2013-05-10 Brandonmchu

对于支持CSS3动画的浏览器，您可以使用它来代替jQuery'.animate（）'。不能承诺CSS3动画是完美的，但他们比JS动画更有可能成为好人。为了说明这个琐事，我们可以看到你在说什么，请把一个工作演示放到一个jsFiddle中。 – jfriend00 2013-05-10 16:19:03

您可以轻松地将缓动添加到您的JS动画中，它会使所有的动画都变得更平滑。看看这里的一个例子：jQuery Easing

来源

2013-05-10 16:23:43

工作很好，谢谢 – Brandonmchu 2013-05-10 16:51:16

JQuery的动画（增加IMG的宽度）平滑

回答

相关问题