jQuery滑動並顯示前三個不同高度的兒童

Question

聽起來像這樣一個簡單的任務，但我發現這很難得到這個正常工作，因爲在腳本和隱藏的孩子後加載圖像。每次加載頁面時，我都會收到不同的高度。

http://jsfiddle.net/ek5Uf/

$("h2").click(function(){ 
    var $wrap = $(this).parents(".wrapper"); 
    $wrap.find(".scroller").height(function(){ 
     var height = 0;    
     $wrap.find(".scroller > li:lt(3)").each(function(){ 
      height += $(this).outerHeight(true); 
     }); 
     return height; 
    }).slideDown(); 
}); 

$("h2").eq(0).click(); 

Answer 1

不是很優雅，但是這應該是滾動條的高度設置爲它的第一個3個li項目的高度堅固的解決方案：

$("h2").click(function(){ 
    var $wrap = $(this).closest(".wrapper"); 
    $wrap.find(".scroller").height(function() { 
     var lis = $("> li:gt(2)", this).detach(), 
      ret = $(this).outerHeight(true); 
     $(this).append(lis); 
     return ret; 
    }).slideDown(); 
}); 

Fiddle
我已經稍微編輯了你的小提琴，爲圖像提供不同的尺寸以獲得更好的測試。

我試圖使溶液與.position()，但它給了奇怪的結果，所以detach的li S> 2，得到.scroller的outerHeight與僅前3個li S和重新安裝拆卸li s是最好的解決方案，我可以想像。