Question

我一直试图让四张图片放大，然后在页面加载时逐一恢复原始尺寸。

您可以使用jfiddle：

在此处查看我当前的进度

    $("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");
});

它有效，但它不是很平滑，似乎有点'颤抖'。

如果有人对如何让它变得更顺畅有任何建议，那将非常感激。

干杯！

编辑：

我已经根据下面给出的建议更新了小提琴，但是我仍然无法在每张图片上逐一完成这项工作。

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;

}

Answer 2

我写了这个答案然后意识到它不能在IE9或以下版本中运行，但无论如何我都会发布它。如果你真的需要支持IE9，你可以使用类似Using jQuery as a Fallback for CSS3 Transitions的东西。

CSS3过渡通常应该更平滑，因为浏览器将本地处理和呈现更改，而不是jQuery。浏览器也应该能够使用GPU来加速这个过程。例如：

然而，延迟效果仍然需要在JavaScript中完成，如您已经确定的那样。下面的解决方案将<img>迭代和延迟与添加触发CSS3转换的类相结合。 jQuery动画队列的处理方式与.css()更改的方式不同（请参阅Using jQuery delay() with css()），因此.addClass()需要包含在.queue()调用中。

Demo（Webkit / Chrome - 对于其他浏览器，您需要为transition和transform添加浏览器特定的带前缀或未加前缀的CSS属性

<强>的JavaScript

$('img').each(function(i) {
    $(this)
        .delay(1000 * i)
        .queue(function(next) {
            $(this).addClass('scaledUp'); 
            next();
        })
        .delay(500)
        .queue(function(next) {
            $(this).removeClass('scaledUp'); 
            next();
        });
});

<强> CSS

img {
    height: auto;
    left: 22px;
    margin: 16px auto 34px;
    position: relative;
    width: 175px;
    top: 90px;
    -webkit-transition: all 1s ease;
}

img.scaledUp {
    -webkit-transform: scale(1.3);
}

<强> HTML

<div>
    <img width="175" height="268" alt="" src="http://s233308095.websitehome.co.uk/newtkstarley/wordpress/wp-content/uploads/2013/09/01howwework.png" />
    <img width="175" height="268" alt="" src="http://s233308095.websitehome.co.uk/newtkstarley/wordpress/wp-content/uploads/2013/09/01howwework.png" />
</div>

使用jQuery从中心放大图像

2 个答案: