HTML

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');
    });    
});

Answer 2

您应该定义“.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() { });

});

享受！

如何使用jquery获得此效果（在高度上）？

HTML

CSS

的jQuery

2 个答案:

HTML

的JavaScript