3

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

它能做什么

当您调用slideDowna时，通常会发生divdiv 向下滑动，并且随着它进一步向下滑动，显示较低的内容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%;
}
4

6 回答 6

2

我建议类似于以下内容，但鉴于您没有显示您的 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 小提琴演示。

HTML：

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

CSS：

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

参考：

  1. jQuery：

  2. CSS：

于 2012-04-10T16:22:12.857 回答
0

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

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

在jsfiddle上查看它的实际效果（使用 jQuery UI）。受JQuery 启发：如何执行“推”幻灯片，而不是向上滑动？

于 2012-04-10T16:08:31.630 回答
0

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

这是一个jsFiddle 示例。

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);​
于 2012-04-10T16:10:38.713 回答
0

一个快速的想法（我不知道这是否有效；我稍后会测试）：也许您可以将文本放入一个高度恒定的 div 中。用另一个 div 包裹它，这是您向下和向上滑动的那个。使用位置：相对（或绝对）和底部：0 将恒定高度 div 附加到包装器的底部。使用溢出：隐藏在包装器中，整个事情可能会起作用。

于 2012-04-10T16:04:19.727 回答
0

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

于 2012-04-10T22:03:37.890 回答
0

slideDown 和 slideUp 无济于事。您将无法解决问题。将可扩展块包装在一些虚拟父 div 中并将其溢出设置为隐藏。然后将您的可扩展块放置在该虚拟父级内，以便仅可见 5h 项。

当您希望更改 div 的状态时，首先将父虚拟 div 的高度设置为等于其子级，然后使用 animate() 将 div 的顶部位置属性设置为 0。

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

于 2012-04-10T16:02:36.937 回答