jQuery - 動畫高度不能按預期工作

Question

似乎無法使此工作，任何想法？

http://jsfiddle.net/U92bM/

的JavaScript：

$('.articleSlide').each(function() { 
    var current = $(this); 
    current.attr("box_h", current.height()); 
}); 

$(".articleSlide").css("height", "100px"); 

$(".showHide").html('<a href="#">More</a>'); 

$('.showHide a').click(function() { 
    var open_height = $(".articleSlide").attr("box_h") + "px"; 
    $(this).closest("articleSlide").animate({"height": open_height}, {duration: "slow" }); 
}); 

HTML：

<div class="articleSlide"> 
    <!-- lots of text --> 
</div> 

<div class="showHide"></div> 

Answer 1

試試這個：

$('.articleSlide').each(function() { 
    var current = $(this); 
    current.attr("box_h", current.height()); 
}); 

$(".articleSlide").css("height", "100px"); 

$(".showHide").html('<a href="#">More</a>'); 

$('.showHide a').click(function() { 
    var open_height = $(".articleSlide").attr("box_h") + "px"; 
    $(this).parent().parent().children('.articleSlide') 
     .animate({"height": open_height}, "slow"); 
}); 

http://jsfiddle.net/maniator/U92bM/5/

你必須轉到錨標籤的祖父母，以便找到你想要操作

的作品就像一個魅力^ _^

Answer 2

嘗試，因爲你用.live（）方法，結合你的點擊事件的元素'動態添加錨點到DOM。另外，你不需要爲每個'.sicleSlide'添加一個屬性「box_h」，給它們'current.height（）'的值。請準時使用高度。差不多是這樣的：

$('.showHide a').live('click', function() { 
    var open_height = $(".articleSlide").height() + "px"; 
    $(this).closest("articleSlide").animate({"height": open_height}, {duration: "slow" }); 
}); 

又是怎麼回事：

$('.showHide a').click(function(e) { 
    var open_height = $(e.target).height() + "px"; 
    $(this).closest("articleSlide").animate({"height": open_height}, {duration: "slow" }); 
}); 

使用「e.target」，以確保你得到正確的鏈接的高度。我假設你測試過以確保.click（）工作正常。你也可以測試相同的動畫，但刪除了「px」字符串，因爲我嘗試過這一次，它的工作。你可以完全刪除「.each（）」函數。

Answer 3

你得到了元素之間的關係錯誤。 closest搜索最近的祖先但articleSlide div不是鏈接的祖先。它的母公司的兄弟姐妹是。這會工作：

$(this).parent().prev().animate(...); 

http://jsfiddle.net/U92bM/7/