Question

http://henrybuiltfurniture.com/new/furniture.php?p=wave-stool

我有一系列大图像，我需要在它们之间平滑过渡（不一定是jquery - 也许我可以用某种方式使用css3？）而且我似乎无法用jQuery这样做。

这是移动文档的代码，有效地移动图像：

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

感谢任何帮助。

Answer 1

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

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

Answer 2

正如您所提到的，您不应该直接使用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 {
    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属性，那么为什么更好？进一步阅读。

jQuery动画的大图像移动波涛汹涌

2 个答案: