Question

我正在使用jQuery Animate在图像上创建平移缩放效果。总的来说，它有两个例外。

首先它启动动画并且似乎撞墙而继续放大。有没有办法防止这种情况并使动作平稳运动。

其次是动作有点生涩，尤其是最后。有没有办法解决这个问题？如果我应该尝试添加某种形式的缓动，我在页面上使用缓动。（这是在Firefox和Chrome中测试的，都是生涩的。）

这是动画的jsFiddle。

注意：我使用的是jQuery 1.8.3，我可以使用CSS但坚持使用jQuery来实现跨浏览器的兼容性。（不幸的是，我的大多数用户都在IE上。）

的 HTML 的

<div style="width:1140px; height:500px; overflow:hidden; text-align:center;">
    <img id="pan-zoom" style="width:900px; height:600px; position:relative; top:-80px; left:0;" alt="European Bee-eaters" src="http://upload.wikimedia.org/wikipedia/commons/9/96/Pair_of_Merops_apiaster_feeding.jpg" />
</div>

的 JS 的

$(window).load(function() {
    $('#pan-zoom').animate({
        width: '2141px',
        height: '1428px',
        top: '-200px',
        left: '-405px'
    }, 8000, function() {
            // Fade In Hidden DIV
    });
});

Answer 1

更改

<div style="width:1140px; ...

要

<div style="width:900px; ...

这个想法是，在放大之前，缩放图像以适合父宽度，这是你想要移除的效果。

更新了fidde。

编辑：或者绝对定位，如评论。

Answer 2

如果加快动画效果，它会显得更加流畅。动画越慢，任何粗糙度都越明显。

将缓和更改为线性似乎也有帮助。默认缓动（摆动）结束时的缓慢使得动画的粗糙度非常明显。下面的代码使用线性缓动，速度提高了两倍（并将外部宽度改为900px，如@loxxy建议的那样），看起来相当不错。

$(window).load(function() {
    $('#pan-zoom').animate({
        width: '2141px',
        height: '1428px',
        top: '-200px',
        left: '-405px'
    }, 4000, 'linear', function() {
        // Fade In Hidden DIV
    });
});

只有使用像WebGL这样的硬件支持，才能使大型动画变得平滑和缓慢。除此之外，选择平滑和慢速，无论哪个更重要。

Answer 3

如果使用css transform属性的scale函数，则会解决这两个问题。我认为（自从我使用jquery并且没有跟进时已经很长时间了）jquery.animate函数与这些函数不兼容。如果你想继续使用jquery，你应该使用插件或编写一个插件。

在你的小提琴中，你使用left，top，width和height属性。这在webkit中尤其不稳定。

Jquery转换插件顶级谷歌搜索结果： http://ricostacruz.com/jquery.transit/

与jQuery动画的夫妇问题

3 个答案: