高度設置爲「自動」不與JS動畫工作

Question

我試圖在下面的代碼中將高度設置爲「自動」，以便DIV根據內容調整其大小。不幸的是，這是行不通的。 （如果我在px中設置高度，沒有問題）。任何想法爲什麼以及如何解決這個問題？非常感謝

Fiddle HERE。

JS

$("a").click(function() { 
    var page = $(this).data("page"); 
    if ($('div:animated').id != page) { 
     var active = $(".fold.active"); 

     // if there is visible fold element on page (user already clicked at least once on link) 
     if (active.length) { 
      active.animate({ 
       width: "0" 
      }, 200) 
       .animate({ 
       height: "0" 
      }, 200, function() { 
       // this happens after above animations are complete 
       $(this).removeClass("active"); 

      }) 

      // clicking for the first time 
     } 
     if (active.attr("id") != page) { 
      $("#" + page) 
       .addClass("active") 
       .animate({ 
       height: "auto" 
      }, 1000, 'linear') 
       .animate({ 
       width: "200px" 
      }, 400, 'linear') 

     } 
    } 
}); 

Answer 1

你需要計算height爲jQuery的animate()發生

演示 - http://jsfiddle.net/7hcsv5dn/

var el = $("#" + page) 
autoHeight = el.height(), 
    $("#" + page) 
    .addClass("active") 
    .animate({ 
     height: autoHeight 
    }, 1000, function() { 
     el.height('auto'); 
    }) 
    .animate({ 
     width: "200px" 
    }, 400, 'linear')