Question

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

在悬停时基本上扩展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);
});

更新了小提琴here。

Answer 2

您可以在悬停时将样式设置为“display：inline-block”，并在鼠标移除时将其删除。这适用于IE8。对于IE7而言 - 你只需要额外的风格（缩放：1; *显示：内联; _高：30px;“） - 可根据您的要求更改高度。

使用jQuery扩展DIV

2 个答案: