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

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

$(".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 и вниз, так что всегда будет приспособиться к высоте содержания

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

Answer 2

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

Answer 3

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

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

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

Обновлен пример использования slideUp обратного вызова, чтобы изменить содержимое, а затем сдвиньте его вниз еще раз.

Answer 4

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

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