使用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);
});

这里更新了小提琴.