jQuery анимация высоты шаг за шагом

Question

Мой текущий скрипт работает нормально, где 3 кнопки меню (menubtn1, menubtn2, menubtn3) изменяют высоту контейнера. Я хотел бы, чтобы скрипт сначала анимировал высоту до 0px, а затем анимировал до их соответствующих высот.

Таким образом, я могу заменить содержимое моего контейнера, когда высота = 0px, а затем, когда он увеличится, новое содержимое будет видно.

вот мой сценарий:

$(document).ready(function() {

    $(".menubtn1").click(function() {
        $(".container").stop().animate({
            height: '350px'
        }, {
            queue: false,
            duration: 600,
            easing: 'easeInOutQuint'
        })
    });
    $(".menubtn2").click(function() {
        $(".container").stop().animate({
            height: '200px'
        }, {
            queue: false,
            duration: 600,
            easing: 'easeInOutQuint'
        })
    });
    $(".menubtn3").click(function() {
        $(".container").stop().animate({
            height: '185px'
        }, {
            queue: false,
            duration: 600,
            easing: 'easeInOutQuint'
        })
    });

});​

Answer 1

Вы можете использовать .slideUp () и .slideDown () вместо .animate(), например:

$(".container")
   .slideUp("slow", function () {
      $(this)
          .html("<p>New content</p> and some other stuff")
          .slideDown("slow");
   });

Редактировать

Обновлен пример использования функции обратного вызова slideUp для изменения содержимого и его повторного скольжения вниз.

Answer 2

Вы могли бы сделать что-то вроде этого ->

$(document).ready(function() {
$("#menubtn1").click(function() {
        $(".container").animate({height:"0px"},  function () {
            $("#hidden-content").hide();
            $("#show-content").show( function () {
                $(".container").animate({height:"200px"})   
            });
        });
    });
});

Answer 3

Вы можете добавить свой контент в функцию обратного вызова «complete», а затем снова анимировать его:

$(".container").stop().animate({height:0},{queue:false, duration:600, easing: 'easeInOutQuint', complete: function(){
    $(this).html('your content').animate({height:350},600);
}})  

Я также обновил вашу скрипку :) http://jsfiddle.net/RpzpZ/3/

Вот еще один вариант. Наверное, так я и сделаю. Я добавил контент прямо в HTML. Я не знаю, нужны ли вам фиксированные высоты различного содержимого, здесь я использовал slideUp и Down, чтобы он всегда соответствовал высоте содержимого

http://jsfiddle.net/RpzpZ/5/

Answer 4

Можно просто добавить функцию обратного вызова в ваш вызов animate, которая вызывает другую функцию animate, которая открывает контейнер обратно.