jQuery動畫高度一步一步

我當前的腳本工作正常，然後3個菜單按鈕（menubtn1，menubtn2，menubtn3）使容器更改高度。我想要做的是讓腳本首先將高度設置爲0px，然後動畫到它們各自的高度。jQuery動畫高度一步一步

這樣，我可以替換我的容器的內容，當height = 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' 
     }) 
    }); 

});

來源

2012-02-18 Craig Jonathan Kristensen

http://jsfiddle.net/craigzilla/RpzpZ/1/ – 2012-02-18 16:06:57

您可以添加在「完整的」回調函數的內容，然後再製作動畫：

$(".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中添加了內容。如果你需要的不同內容的固定高度，我不知道，我在這裏使用效果基本show和下來，它會一直調整到內容

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

來源

2012-02-18 16:11:15 Andy

這工作就像一個魅力。是否可以加載DIV而不是「你的內容」？ – 2012-02-18 16:17:47

該代碼現在看起來很整齊，但我不能想象它:) 我根本無法看到我可以添加我的不同「內容」代碼的位置？ – 2012-02-18 16:27:05

@CraigJonathanKristensen你有什麼不同的內容？他們已經隱藏在頁面上的div，或者你想讓他們通過ajax加載？ – Andy 2012-02-18 16:47:32

可以只添加的回調函數，你的動畫調用，它調用打開容器備份另一個動畫功能。

來源

2012-02-18 16:08:33 kand

你可以使用.slideUp()和.slideDown()而不是使用.animate()，像這樣：

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

編輯

更新的例子使用效果基本show回調改變的內容，然後向下滑動再次。

來源

2012-02-18 16:08:55

在這種情況下，將在slideUp的開始處設置內容。 – Andy 2012-02-18 16:13:02

@Andy當然，對此感到抱歉，我更新了使用回調的答案。 – 2012-02-18 16:16:31

的高度，你可以做這樣的事情 - >

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

來源

2012-02-18 16:11:33 Undefined

jQuery動畫高度一步一步

回答

相關問題