用jQuery扩展DIV

我有一些代码可以在这里看到

当悬停在上方时，它基本上会扩大一个div高度，而当不悬停在上方时，它会收缩。 目前它从75像素扩展到300像素。我想更改此设置，使其从75px扩展到适合DIV内内容的高度。我已尝试将扩展值设置为“auto”，但这似乎不起作用。谁能给我一个指针吗

HTML

CSS

---

您可以计算

中元素的累积高度，并将结果用作

animate（）

的参数：

更新了FIDLE。

您可以在悬停时将样式设置为“显示：内联块”，在鼠标悬停时将其删除。这适用于IE8。对于IE7-你有一点额外的风格 （缩放：1；*显示：内嵌；_高度：30px；）-高度可根据您的要求进行更改

<div class="expand">
    <img src="http://rauanklassnikringing.com/wp-content/uploads/2010/11/carrot-imperator.jpg" alt="" />
</div>
<div class="expand">
    <img src="http://rauanklassnikringing.com/wp-content/uploads/2010/11/carrot-imperator.jpg" alt="" />
</div>

<div class="expand">
    <img src="http://rauanklassnikringing.com/wp-content/uploads/2010/11/carrot-imperator.jpg" alt="" />
</div>

<div class="expand">
    <img src="http://rauanklassnikringing.com/wp-content/uploads/2010/11/carrot-imperator.jpg" alt="" />
</div>

<div class="expand">
    <img src="http://rauanklassnikringing.com/wp-content/uploads/2010/11/carrot-imperator.jpg" alt="" />
</div>

$('.expand').hover(function() {
    $(this).animate({
        height: '300px'
    }, 300);
},function() {
    $(this).animate({
        height: '75px'
    }, 300);
});

.expand {
    overflow: hidden;
    margin-bottom: 15px;
    height: 75px;
}

$('.expand').hover(function() {
    var contentHeight = 0;
    $(this).children().each(function() {
        contentHeight += $(this).height();
    });
    $(this).animate({
        height: contentHeight
    }, 300);
}, function() {
    $(this).animate({
        height: '75px'
    }, 300);
});