Как свернуть/развернуть DIV, как на этом сайте

Question

Мне очень нравится, как DIVs складываются/разворачиваются сверху вниз, а затем слева направо, когда пользователи нажимают на пункты меню (об услугах, моих инструментах и ​​т. Д.).) на этом веб-сайте. Кажется, что он был разработан очень талантливым человеком.

Любая идея, как добиться чего-то подобного? Я ожидал, что это будет сделано с помощью сложной анимации CSS, но посмотрите на лист CSS, который, похоже, не так.

Многие благодарят

Answer 1

На этом сайте это достигается с использованием jQuery UI - более конкретно с Fold Effect.

Answer 2

Если вы не хотите использовать jQuery UI, я думаю, вы могли бы сделать это, оживив css ...: - ?? Первое состояние: height: 0; и width :30px; ... затем, используя анимацию в событии click, вы можете дать высоте значение и время анимации, ширина задержка равна o больше, чем время анимации по высоте, а затем это значение ... что должно делать трюк, но он более жесткий, чем на самом деле, используя UI

Answer 3

Я думаю, что использование jQuery UI для этой задачи будет излишним, на самом деле вам даже не нужен jQuery, но я думаю, вы хотите придерживаться его, так как это относительно легко, как читать и писать код:

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

См:

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