我正在整理網站，大圖像背景延伸background-size:cover。請看看這裏：http://knihaoplanu.g6.cz 大圖像背景的Ch啪動畫

正如你可能看到的，垂直的動畫是不是順暢。所有JPEG圖像的大小不超過500KB，其尺寸通常在1000x500左右。

我用非常基本的代碼：

function SlideShow() { 
    $('#wrapper .scroll').bind('click',function(e){ 

    // SETUP 
    e.preventDefault(); 
     var $anchor = $(this).attr('href'); 

     // ANIMATION 
     $('#wrapper').stop().animate({ 
      scrollLeft: $($anchor).position().left 
     }, 1000); 
    });

你對我有什麼想法如何使動畫更流暢？我在網上發現了一些類似的主題，但沒有一個提供非常明確的答案（至少對我而言）。其中一人表示，問題在於background-size:cover，然而即使沒有這種情況，這種不穩定性依然存在。

非常感謝！

EDIT（解決）

CSS動畫肯定的方式 - 動畫找到了電影更流暢。我不想重新編碼該網站，因爲它非常接近截止日期，所以我使用jQuery Transit plugin，正如Marcus善意地建議的那樣。

不幸的是，我還沒有完全完成。當我用我的scrollLeft命令替換x（如插件網站上的建議）時，我的水平佈局基於百分比種類融化。 :)

你能指導我如何使用scrollLeft並保留Transit的功能嗎？

謝謝！

來源

2013-06-25 Petr Cibulka

你應該看看[使用CSS動畫（https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations）來代替。 – mekwall

是否有可能實現更好的舊jQuery的平滑效果？我想使用CSS3動畫作爲最後的手段，因爲這意味着很多重新編碼... –

你使用的是什麼版本的jQuery？你可以給[transit]（http://ricostacruz.com/jquery.transit）一下。 – mekwall

好了，一個真棒Transit Plugin就是答案！如果運行速度低於500秒（在Firefox和Chrome上測試），動畫仍然有點波動，但這對我來說並不是什麼大問題。

約在編輯 - 我忘了讓x參數負。 :)

謝謝Marcus！

來源

2013-06-25 22:00:35

大圖像背景的Ch啪動畫

EDIT（解決）

回答

相關問題