jquery - 我怎样才能用 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

你需要动画前后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');
    });    
});​