如何在这个网站上折叠/展开DIV

Question

当用户点击本网站上的菜单项（关于，服务，我的工具等）时，我非常喜欢DIV从顶部到底部然后从左到右折叠/展开的方式。似乎它是由一个非常有才华的人开发的。

知道如何实现这样的目标吗？我希望通过复杂的CSS动画完成这项工作，但是看看似乎并非如此的CSS表格。

非常感谢

Answer 1

在该网站上，使用jQuery UI - 更具体地使用Fold Effect来实现。

Answer 2

如果你不想使用jQuery UI，我猜你可以通过动画css来实现......： - ?? 第一个状态是height: 0;和width :30px; ...然后使用点击事件上的动画，你可以给高度一个值和动画时间，宽度延迟等于o大于高度动画时间然后它＆ ＃39; s值...应该做的伎俩，但它比实际使用UI更加僵硬

Answer 3

我认为单独使用jQuery UI来完成这个任务会有点过分，实际上你甚至不需要jQuery，但我认为你想坚持下去，因为阅读和编写代码都相对容易：

$("a").click(function() {
    $("#fold")
    .animate({ width: "500px" }, 1000 )
    .animate({ height: "500px" }, 1000 )
});

请参阅：

http://jsfiddle.net/bartkarp/u3qtt6fo/

http://api.jquery.com/animate/