Javascript jQuery动画中的大图像运动起伏

我有一系列的大图像，我需要在它们之间平滑过渡（不一定使用jquery，也许我可以使用css3？），而我似乎不能使用jquery

下面是移动文档、有效移动图像的代码：

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

---

非常感谢您的帮助。

尝试将此添加到您的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);
}

---

基本上，我们正在添加硬件加速，然后使用过渡平滑效果（当然，您可以随意调整）

您不应该像前面提到的那样，使用直接向上jQuery来制作要求更高的动画。我会将jQuery全部废弃，或者为它提供一个css3动画插件。使用vanilla 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的变换即可轻松设置动画：

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

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

var bigImages=document.querySelectorAll（'.bigimg'）；
对于（var i=0；i

榜样

---

Paul irish解释了为什么使用

left

和

top

属性设置

transform

动画比设置

position:absolute

动画更好，如果您想进一步阅读的话。

您可能还应该使用带有供应商前缀的transition属性。所有现代浏览器都支持过渡，但为了防止旧浏览器出现问题，他可以添加-webkit过渡（其他一切都很好，根本不需要），当然这需要一些供应商前缀（可能还有jQuery回退）来最大限度地支持浏览器，但是它在chrome中是开箱即用的，至少如果你想继续用jQuery的方式来做这件事，我建议你看看wich可以使用css3使用$（..）.transition（）制作动画，就像$（..）.animate（）一样

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

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