调整另一个div的div onclick，过渡效果

Question

嘿伙计们。基本上我有2个div。当我单击.menu（灰色条）时，.sort（橙色条）调整高度。我用jQuery完成了这个。问题是，它没有任何漂亮的过渡。它没有滑动，也没有褪色......没什么。它只是弹出。

这是我所说的JSFiddle。 http://jsfiddle.net/KhcvR/

有人可以帮助我，让它滑落而不是弹出？我的jQuery知识非常有限。欢呼声。

Answer 1

即使您的问题被标记为jquery，您的演示也在使用mootools。我稍微清理了一下这个演示。

在这里演示：http://jsfiddle.net/jomanlk/KhcvR/1/

此处代码

$(".menu").click(function() {
    $(".sort").animate({"height" : "350"}, 500);
 });

Answer 2

单击一次以向下滑动，然后再次向上滑动

$(".menu").toggle(function() {
    $(".sort").animate({
        height: 350
    });
}, function() {
    $(".sort").animate({
        height: 25
    });
});

检查http://jsfiddle.net/KhcvR/2/

处的工作示例

Answer 3

$(".menu").click(function() {
    $(".sort").animate({ height : 350 });
 });

还有很多其他选项可以使用幻灯片，还可以在动画上设置其他参数来更改速度并在完成后触发回调函数。看看animate因为它非常酷，除非你改变字体内容（有时它会变得有点乱）。