javascript - jQuery 动画的几个问题

Question

我正在使用 jQuery Animate 在图像上创建平移缩放效果。总的来说，除了两个异常(exception)，它运行良好。

首先它开始动画，似乎撞到了墙上，然后继续放大。有没有办法防止这种情况并使运动成为一个平滑的运动。

第二是 Action 有点生涩，尤其是在最后。有没有办法解决这个问题？如果我应该尝试添加某种形式的缓动，我会在页面上使用缓动。 (这是在 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

如果加快动画速度，它会显得更流畅。动画越慢，粗糙度就越明显。

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

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

只有在像 WebGL 这样的硬件支持下才能实现既流畅又缓慢的大型动画。除此之外，请在平滑和缓慢之间进行选择，以更重要的为准。