Question

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

它的作用

当您在slideDown上致电div时，通常会发生这样的情况：div会向下滑动，当它向下滑动时，div的较低内容会被显示出来。

我需要做什么

我希望div向下滑动，但不应显示div的较低内容，而应显示上部内容。因此，最底部的内容应首先可见，然后上部内容应滑入视图。这一点的目的是让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相同的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;
}

参考文献：

jQuery的：
- animate()。
- css()。
CSS：
- overflow。
- position。

Answer 2

slideDown和slideUp无济于事。你不会乱哄哄的。将可扩展块包裹在一些虚拟父节点中。将它的溢出设置为隐藏。然后将可扩展块放置在该虚拟父级内，以便只显示5h项目。

当您想要更改div的状态时，首先将父虚拟div的高度设置为等于其子项，然后使用animate（）将div的top position属性设置为0。

如果你能在jsFiddle上给我HTML标记和CSS代码，我可以帮助你。

Answer 3

一个简单的想法（我不知道这是否有效;我稍后会测试）：也许你可以将文本放入一个高度恒定的div中。用另一个div来包装它，你可以将它向下滑动。使用position：relative（或absolute）和bottom：0将常量高度div连接到包装器的底部。随着溢出：隐藏在包装器中，整个事情可能会起作用。

Answer 4

jQuery可以做你想要的，我认为有一个slideDown方法来处理这个选项会很棒。无论如何，你可以这样做：

$('div').show("slide", { direction: "up" }, 1000);

在jsfiddle上查看它（使用jQuery UI）。灵感来自JQuery: How to perform a "push" slide, not a slide up?

Answer 5

当然，你可以这样做并使用.slideDown（）。你只需要在一个相对定位的元素（例如div）中包含你想要使用.slideDown的项目然后将你元素上的定位设置为绝对，然后通过设置它将它绑定到父元素的底部。 CSS底部属性为零。

这是 jsFiddle example 。

HTML：

<div id="container">
    <div id="foo">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    </div>
</div>

CSS：

#foo{
    border:1px solid #999;
    float:left;
    position:absolute;
    bottom:0;
}
#container {
    position:relative;
    height:200px;
}

jQuery的：

$('#foo').hide().slideDown(3000);

Answer 6

我最终使用Armatus和tea_totaler的答案组合起来，你可以在这里看到它：http://jsfiddle.net/Cg4yN/

slideUp最后显示div顶部的位置

6 个答案: