jquery - 最后显示 div 顶部的 slideUp

Question

jQuery 的 slideDown 和 slideUp 函数非常方便，但我需要稍微改变一下它们的行为。

它的作用

当您在 div 上调用 slideDown 时，通常发生的情况是 div 向下滑动，并且随着它进一步向下滑动，div 的下方内容 被揭示。

我需要它做什么

我想让 div 向下滑动，但是应该显示上面的内容，而不是显示 div 的下面的内容。所以最底部的内容应该首先可见，然后上面的内容应该滑入 View 。这样做的目的是让 div 看起来像是从屏幕外滑到屏幕上。这是一个图表:

How it works now:
----------
| Line 1 | |  Reveals from top to bottom; top is anchored in place
| Line 2 | |  As the div expands vertically, Line 1 is shown first and
| Line 3 | |  none of the lines move as they become visible.
********** V
| Line 4 | 
| Line 5 |
----------

How I would like it to work:
----------
| Line 1 |    
| Line 2 |    
| Line 3 |    
********** ^  Reveals from bottom to top; bottom is anchored in place
| Line 4 | |  As the div expands vertically, the Line 5 is shown first and
| Line 5 | |  moves downward as more is revealed.
----------

我意识到我可能没有有效地沟通，如果您需要更多说明，请告诉我。

更新:

这是与我正在使用的等效的 HTML:

<div id="anchored">
    <table>
        <tr>
            <td>
                <!-- this is the div that is initially invisible and should slide from the bottom -->
                <div id="slider">
                    hello
                </div>
            </td>
        </tr>
        <tr>
            <td>
            <!-- this is always visible and should be pushed down by "slider" as it moves downward -->
            hello 
            </td>
        </tr>
    </table>
</div>

CSS:

#anchored {
    position: fixed;
    top: 0px;
}

#slider {
    display: none;
}

table {
    width: 100%;
}

Answer 1

我建议类似于以下内容，但鉴于您尚未显示您的 HTML，这只能是一个建议(而不是具体的答案，但如果您发布您的实际 HTML，那么我可以尝试提供一些东西这样会更好):

var container = $('#slide'),
    p = container.find('p');

container.height(p.height());
$(p).css({
    'position' : 'absolute',
    'top' : -p.height()
}).animate({
    'top' : 0
},2500);

JS Fiddle demo .

HTML:

<div id="slide">
<p><!-- contents... --></p>
</div>​

CSS:

#slide {
    border: 1px solid #000;
    position: relative;
    overflow: hidden;
}​

引用资料:

1. jQuery:

   • animate() .
   • css() .

2. CSS:

   • overflow .
   • position .