在 javascript/jquery 中动画 div 瀑布答案

【问题标题】：Animating div waterfall in javascript/jquery在 javascript/jquery 中动画 div 瀑布
【发布时间】：2012-01-22 21:48:43
【问题描述】：

我正在尝试为 duitang.com 中的 div 瀑布制作动画。我尝试了以下脚本：

http://jsfiddle.net/XKdKt/3/
http://jsfiddle.net/NFPKc/

第二个链接似乎最接近我想要的，因为与第一个和第二个链接不同，div 从下到上显示，但下的 div 不会随着新 div 滚动。

谁能指引我正确的方向，让它看起来像对堂的？

您的帮助将不胜感激。谢谢。

【问题讨论】：

您正在示例中创建 div。在 duitang.com 上，div 已经存在。它们是隐藏的，因为它们位于一个 DIV 标记中，该标记具有高度和宽度，并且溢出设置为隐藏。然后，我假设，用 javascript 更改填充（或其他值）以使内部 DIV 向下移动，并导致下一个 DIV 可见。

标签： javascript jquery

【解决方案1】：

这样的事情应该可以工作：

$('#gen').click(function() {
    var div = $('<div><h6>Another</h6><p>Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p></div>').prependTo('body');

    var height = div.outerHeight();
    div.css({
        "marginTop": -height,
        "opacity": 0
    }).animate({
        "marginTop":0,
        "opacity": 1
    }, "slow");
});

示例：http://jsfiddle.net/petersendidit/NFPKc/7/

【讨论】：

谢谢。我打算像你一样使用 marginTop 来回答我自己的问题，但因为我没有足够的代表点而无法回答。