Question

在我正在处理的网络应用中，我想做一些小滑动通知，比如在推特或桌面上。 jQuery的.slideDown完全符合我的要求，但它是颠倒的。 .slideUp不会执行slideDown的颠倒版本。相反，它隐藏了一些内容，例如在您清理了使用slideDown显示的旧邮件之后。

那么在jQuery中执行颠倒slideDown()的最简单的代码是什么？

Answer 1

如果您说要让揭示（slideDown）从下到上显示内容，则需要让CSS为元素提供固定的bottom位置。

示例： http://jsfiddle.net/aVNL6/

html

<a href='#'>click me</a>
<div id='container'>
    <div id='box'></div>
</div>

CSS

#container {
    width: 300px;
    height: 300px;
    position:relative;
    background: yellow;
}
#box {
    width: 100px;
    height: 100px;
    display: none;
    background: orange;
    position: absolute;
    left: 100px;
    bottom: 0;
}

JS

$('a').click(function() {
    $('#box').slideDown();
});

Answer 2

由于您已将jquery-ui放入标记中，因此这里是jqueryUI解决方案（需要Effects Core）

 $('#box').show('slide', {direction: 'down'});

更新了帕特里克的小提琴：http://jsfiddle.net/aVNL6/2/

Answer 3

有关使用jQuery滚动内容的许多可能方法的信息，请参阅learningjquery.com

如何调用颠倒的jQuery.slideDown（）？

3 个答案: