Question

我有一系列图片，我想从左到右slideDown()（创建瀑布效果）。我使用setInterval()创建了瀑布效果：

var i = 1;
var numberCount = 5;
var counter = window.setInterval(function(){
            $("#instagram-pictures .instagram-picture:nth-child(" + i + ")").slideDown(1200);
            if(i === numberCount){
                window.clearInterval(counter);
            }
            else{
                i = i + 1;
            }
        }, 400);

除slideDown部分外，这种方法毫无障碍。出于某种原因，我的照片并没有从整个顶线的宽度向下滑动，而是在＃34;向外扩展＆＃34;从左上角开始。

jsFiddle here

我该如何解决这个问题？

Answer 1

尝试：

为每张图片添加固定的width

.instagram-picture{
    display: none;
    width:100px;
    height: 160px;
}

width根据height确定，并且由于height在图片向下滑动时正在发生变化，width随之变化。因此，设置固定的width可以解决您的问题！

<强> JSFiddle Demo

Answer 2

.slideDown()动画元素的height，而不是它的位置。您允许根据width自动确定每张图片的height。因此，随着高度的变化，它也会确定新的宽度，并为对角线拉伸设置动画。

如果你给图像一个固定的宽度，你将得到你想要的向下动画。

来源：http://api.jquery.com/slidedown/

为什么slideDown从左上角扩展图像而不是整个宽度？

2 个答案: