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

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

它可以工作，但它并不是很流畅，似乎有点“颤抖”。

如果有人对我如何让它变得更流畅有任何建议，那将不胜感激。

干杯!

编辑：

我已经用下面给出的建议更新了小提琴，但是我仍然不能让它在每张图像上一个接一个地工作。

score 0 · Accepted Answer

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

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

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

演示（Webkit/Chrome - 对于其他浏览器，您需要添加浏览器特定的前缀或无前缀 CSStransition属性transform）

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>

score 0 · Accepted Answer

使用 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;

}

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

2 回答 2

Related

Reference