jQuery动画图像：伪造的慢图像加载与糟糕的互联网连接

Question

对于即将到来的#InternetSlowdown抗议活动，我希望动画图像，使它们看起来像是通过慢速互联网连接加载的。

我想在jQuery中设置动画。

$("img").hide().animate({height: ["toggle", "swing"]}, 3000);

“切换”效果是正确的，因为它会降低高度。 但它应该使用之前的原始高度，并将图像从上到下加载到“框架”中。

测试：http://jsfiddle.net/qs16g18n/

Answer 1

如果你想这样做，只需给它一个overflow:hidden的容器。

<div class="SlowImgFrame">
    <img class="SlowImg" src="SlowImg.png" />
</div>

设置CSS：

.SlowImg {
    height:100px;
}

.SlowImgFrame {
    height:0;
    overflow:hidden;
}

然后为框架设置动画：

$('.SlowImgFrame').animate({
    height:100
},3000);

你可以为你想要的动画添加任何shmancy组件，但这应该可以提供你想要的效果。