jquery - 使用 jQuery 从中心放大图像

Question

我一直在尝试让四张图像放大，然后在页面加载时一张一张恢复到原始大小。

您可以使用 jfiddle 在这里查看我当前的进度:

http://jsfiddle.net/XFR7D/8/

    $("img").each(function(i, e) {
        $(this).delay(i*1000).animate({

            width:'200px',
            left: '7px',
            top: '76px'


        }, "slow");

        $(this).delay(i*100).animate({

            width:'175px',
            left: '22px',
            top: '90px'


        }, "slow");
});

它可以工作，但是不太平滑，并且似乎有点“颤抖”。

如果有人对我如何使其更顺畅有任何建议，我将不胜感激。

干杯!

编辑:

我已经用下面给出的建议更新了 fiddle ，但是我仍然无法让它在每个图像上一一工作。

Answer 1

使用 css3 动画可以帮助您获得更流畅的动画:

http://jsfiddle.net/jonigiuro/XFR7D/9/

img {
    height: auto;
    left: 22px;
    margin: 16px auto 34px;
    position: absolute;
    width: 175px;
    transition: width ease 1000ms,
                left ease 1000ms,
                top ease 1000ms;

}