如何在本网站上展开/展开DIV

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

任何想法如何实现这样的事情？我期待着通过复杂的CSS动画来完成这个任务，但是看起来似乎并非如此。

许多感谢

来源

2014-12-02 Greg

您可以查看网站...为什么不认为它有对CSS和HTML和JS？ – Codeman 2014-12-02 20:01:51

它看起来像他们有一个边界定位的div和只是随着时间的推移改变宽度/高度。 – rfornal 2014-12-02 20:05:17

在该网站上它与使用jQuery UI实现 - 更具体地说与Fold Effect。

来源

2014-12-02 20:06:58 lmazgon

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

来源

2014-12-02 20:46:31 Alin

我认为只使用jQuery UI来完成这项任务将是一个矫枉过正的问题，实际上你甚至不需要jQuery这里，但我认为你想坚持下去，因为它比较容易既能读取和写入代码：

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

参见：

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

来源

2014-12-02 21:04:30

感谢这个例子！如果它没有太多的问题，你可以添加一个或两个链接到你的例子（如，如果它是一个导航菜单），并展开功能，当再次点击链接或另一个链接？所以基本上更接近我以网站为例。然后我会试着了解它是如何工作的，非常感谢您的帮助！ – Greg 2014-12-03 07:39:55

@Greg，我已经更新了小提琴:)添加了一些额外的评论，他们应该更容易掌握发生了什么。尽管我强烈建议查看jQuery文档。 – 2014-12-03 22:23:11

非常感谢，非常感谢您的帮助！ – Greg 2014-12-04 07:48:49

如何在本网站上展开/展开DIV

回答

相关问题