用jQuery扩展DIV

Question

我有一小段代码，可以在这里看到它的实际效果

http://jsfiddle.net/rullingen/GCXsq/1/

它基本上是在悬停时扩展div高度，在不悬停时收缩。目前，它从75px扩展到300px。我想改变这一点，使其从75px扩展到适合DIV内部内容的高度。我曾尝试将扩展值设置为'auto‘，但似乎效果不佳。有人能给我指点一下吗？

HTML

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

Javascript

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

CSS

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

Answer 1

您可以计算<div>中元素的累积高度，并将结果用作animate()的参数

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

更新了fiddle here。

Answer 2

你可以在鼠标悬停时将样式设置为"display:inline-block“，在鼠标移出时将其删除。这适用于IE8。对于缩放-你有所有额外的样式( IE7 :1；*display: inline；_height: 30px;") -高度可以根据你的要求改变。