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

这是我的：

HTML jQuery 如果将链接悬停，可以看到

slideDown（）

正在运行（滚动制作动画）。 现在，我希望在悬停每个div时，将该动画设置为最大高度

我的意思是：如果我在Link1上，而不是在Link2上，我想看到从Link1的高度开始向下滚动的画面。此外，从Link2到Link3，它必须滚动到顶部，直到获得Link3内容的高度

---

我该怎么做？

您应该定义“.emphal”的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>

---

享受吧

您应该定义“.封檐带”的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>

---

享受吧

需要动画前后div的高度。您可以存储div的高度，设置新内容并存储新高度。现在，将div的高度设置回旧值并开始动画

HTML

---

​

需要动画前后div的高度。您可以存储div的高度，设置新内容并存储新高度。现在，将div的高度设置回旧值并开始动画

HTML

---

​

是，但“.封檐带”的高度是动态的，原因是openedTab内容高度：）是，但“.封檐带”的高度是动态的，原因是openedTab内容高度：）

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

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

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

<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>

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() { });

});​

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

$('.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');
    });    
});​