與jQuery的

Question

移動大的圖像平滑的方式我有一個這樣的一系列照片：

我想與jQuery的儘可能快地移動它，當我點擊下一步按鈕。 我在試這個代碼。

$(document).ready(function() { 
    function movePhotoCycle(next) { 
    if (next) { 
     // move the first photo at the end 
     $(".slidephoto").first().clone().appendTo("#slidebox"); 
    } else { 
     // move the last photo at the beginning 

       .... 
    } 
}; 

    $("#next").click(function() { 
    var boxleft = $("#slidebox").position().left; 
     $("#slidebox").animate({ 
      left: boxleft - 1500 
     }, 1500, function() { 
      $(".slidephoto").first().remove(); 
     }); 
     movePhotoCycle(true); 
    return false; 
}); 
}); 

它實際上工作，但在我的I5電腦上有點奇怪（不夠光滑）。幀率低於30，有時更低。可能是因爲每張圖片都是915x390左右。但是有沒有一種方法可以優化這段代碼的執行過程以獲得流暢的動畫？

Answer 1

如果您需要真正流暢的動畫，我會建議您使用GSAP JS而不是jQuery來製作動畫。如果可用，GSAP也將利用本地硬件加速，而jQuery不支持。

如果您需要說服力，請查看the speed test。

有一個jQuery plugin，它允許您使用GSAP擴展jQuery .animate()函數，因此您不需要更改任何代碼。

如果你不想要另一個庫的開銷，那麼你可以嘗試優化你的jQuery動畫（例如確保你的動畫元素是絕對定位的），或者使用CSS轉換來爲位置屬性設置動畫您的元素，如果可用，將在瀏覽器中使用本地硬件加速。這有一個缺點，就是在舊版瀏覽器上根本不工作，在瀏覽器上糟糕的實現（如移動）。