Изменение размера div по щелчку другого div, эффект перехода

Question

Привет, ребята. В основном у меня есть 2 деления. Когда я нажимаю .menu (серая полоса), .sort (оранжевая полоса) изменяет размеры по высоте. Я сделал это с помощью jQuery. Проблема в том, что он делает это без каких-либо приятных переходов. Это не скользит, это не исчезает .. ничего. Он просто падает вниз.

Вот JSFiddle того, что я имею в виду. http://jsfiddle.net/KhcvR/

Может ли кто-нибудь помочь мне, чтобы он скользил вниз, а не трещал? Мои знания jQuery очень ограничены. Приветствия.

Answer 1

В вашей демонстрации использовались mootools, хотя ваш вопрос был помечен как jquery.Я немного убрал демо.

Демо здесь: 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, чтобы изменить скорость и запустить функцию обратного вызова, когда она будет завершена.Взгляните на animate , так как это очень круто, если только вы не меняете содержимое шрифта (иногда это становится немного грязным).