我怎樣才能得到這個效果（高度）與jQuery的？

Question

這是我code：

HTML

<div style="float:left; width:100px;"> 
    <a class="openTab" href="http://www.link.it">1 Line</a> 
    <div style="display:none;">My Text</div> 
</div>  

<div style="float:left; width:100px;"> 
    <a class="openTab" href="http://www.link.it">3 Lines</a> 
    <div style="display:none;">My Text<br /> on 3<br> Lines</div> 
</div>   

<div style="float:left; width:100px;"> 
    <a class="openTab" href="http://www.link.it">2 Lines</a> 
    <div style="display:none;">My Text<br /> on 2 Lines</div> 
</div>    

<div class="fascia" style="display:none;"> 
    <div class="openedTab"></div> 
</div> 

CSS

.openedTab 
{ 
    float:left; 
    background-color:red; 
}​ 

jQuery的

$('.openTab').hover(function(e) { 
    e.preventDefault(); 

    $('.openedTab').html($(this).next().html()); 

    $('.fascia').slideDown('200', function() { }); 

});​ 

，如果你將鼠標懸停一個鏈接，就可以看到slideDown()在行動（它滾動製作動畫）。 現在，我想讓這個動畫達到每個div的最大高度，當我將它移動時。

我的意思是：如果我在Link1上而不是在Link2上，我想從Link1的高度開始看到滾動到底部。另外，從Link2到Link3，它必須滾動到頂部，直到獲得link3內容的高度。

我該怎麼辦？

Answer 1

您應該定義「.fascia」的div高度，那麼.slideDown將按照您的要求工作。 您可以隨時使用.animate（）並使用它設置所需的CSS。

編輯：

爲了澄清，對於一個完全動態的最大高度，你需要經過的每個元素，確定其高度和存儲的最大值。然後將其添加到所需的元素。

，如果你真的想要一個動態的高度：

<div style="float:left; width:100px;" class="line"> 
    <a class="openTab" href="http://www.link.it">1 Line</a> 
    <div style="display:none;">My Text</div> 
</div>  

<div style="float:left; width:100px;" class="line"> 
    <a class="openTab" href="http://www.link.it">3 Lines</a> 
    <div style="display:none;">My Text<br /> on 3<br> Lines</div> 
</div>   

<div style="float:left; width:100px;" class="line"> 
    <a class="openTab" href="http://www.link.it">2 Lines</a> 
    <div style="display:none;">My Text<br /> on 2 Lines</div> 
</div>    

<div class="fascia" style="display:none;"> 
    <div class="openedTab"></div> 
</div> 

的JavaScript

var elements = $('.line div'), 
maxH = 0; 

$.each(elements,function(key,val){ 
    var elH = $(elements[key]).css('display','').height(); 
    maxH = (elH > maxH) ? elH : maxH; 
    $(elements[key]).css('display','none'); 
}); 

$('.fascia div').height(maxH); 

$('.openTab').hover(function(e) { 
    e.preventDefault(); 

    $('.openedTab').html($(this).next().html()); 

    $('.fascia').slideDown('200', function() { }); 

});​ 

享受！

Answer 2

您需要動畫前後div的高度。您可以存儲div的高度，設置新內容並存儲新高度。現在您將div的高度設置回舊值並開始動畫。

Quick and dirty example

HTML

... 
<div class="fascia"> 
    <div class="openedTab"></div> 
</div> 

的JavaScript

$('.openTab').hover(function(e) { 
    e.preventDefault(); 

    $('.openedTab').stop(true, true); 

    var heightBefore = $('.openedTab').height(); 

    $('.openedTab').html($(this).next().html()); 

    var heightAfter = $('.openedTab').height(); 

    $('.openedTab').height(heightBefore); 

    $('.openedTab').animate({ 
     height: heightAfter + "px" 
    }, 200, function() { 
     $(this).height('auto'); 
    });  
});​