jQuery的動畫運動波濤洶涌

http://henrybuiltfurniture.com/new/furniture.php?p=wave-stool jQuery的動畫運動波濤洶涌

我有一系列的大圖像，我需要順利地之間進行轉換（不一定使用jQuery - 也許我可以以某種方式使用CSS3？），我似乎無法到用jQuery來做。

下面是移動文件的代碼，有效地移動圖像：

$('body').animate({scrollLeft: $("#limiter"+(viewing+1)).css("left")}, image_change_speed, 'easeOutCirc', function() { 
    //irrelevant code here 
}

任何幫助表示讚賞。

來源

2014-09-03 maxhud

嘗試添加這對你的CSS樣式表：

.limiter * { 
    transition:all 1s ease-in-out; 
    -webkit-transform: translate3d(0, 0, 0); 
    -moz-transform: translate3d(0, 0, 0); 
    -ms-transform: translate3d(0, 0, 0); 
    -o-transform: translate3d(0, 0, 0); 
    transform: translate3d(0, 0, 0); 
}

基本上，我們增加硬件加速，然後用平滑過渡效果（你可以隨意調整它，當然）

來源

2014-09-03 22:31:03 Devin

您應該也可以使用供應商前綴版本的transition屬性。 – gregdev 2014-09-03 22:32:49

所有的現代瀏覽器都支持轉換，但是爲了防止舊的瀏覽器，他可以添加-webkit-transition（一切正常，所以根本不需要） – Devin 2014-09-03 22:36:48

你正如你所提到的，不應該直接將jQuery用於更苛刻的動畫。我會一起取消jQuery或爲其獲取css3動畫插件。使用香草JavaScript中，這是一個如何進行動畫處理圖像的真正簡化的例子：

假設你有兩張圖片：

<img src="http://henrybuiltfurniture.com/new/images/6_5.jpg" class='bigimg img-1'> 
<img src="http://henrybuiltfurniture.com/new/images/6_4.jpg" class='bigimg img-2'>

而且有些款式把他們在正確的地方：

.bigimg { 
    position: absolute; 
    width: 1920px; 
    height: 1080px; 
    transition: transform 2s; 
} 

.img-1 { 
    left: 0; 
} 
.img-2 { 
    left: 1920px; 
}

然後，你可以很容易地通過只是改變了bigimg的動畫變換：

var bigImages = document.querySelectorAll('.bigimg'); 

for(var i = 0; i < bigImages.length; i++) { 
    var image = bigImages[i]; 
    image.style.transform = 'translateX(-1920px)'; 
}

防爆充足的JSFiddle

保羅愛爾蘭有great article經歷爲什麼它是更好的動畫transform，而不是position: absolute與left和top屬性，如果您想一些進一步的閱讀。

來源

2014-09-03 22:38:37

當然，這需要一些供應商前綴（也許是一個jQuery後備）最大化瀏覽器的支持，但它的工作原理至少在 – 2014-09-03 22:41:14

如果你想繼續以jQuery的方式做到這一點，我建議檢查http://ricostacruz.com/jquery.transit/這可以使用css3使用動畫$（..）。transition（）就像$（..）。animate（） – 2014-09-03 22:42:43

jQuery的動畫運動波濤洶涌

回答

相關問題