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的寬度）平滑

回答

相關問題