jquery - 使用 jquery animate 时 Div 不会占据全高

Question

我在一个页面上有四个框，当用户将鼠标悬停在它们上方时，框的高度会扩展并且会显示更多文本。盒子中的文本数量不同，盒子的高度需要增加到足以显示所有文本。我正在使用 jquery animate 来执行此操作，但是当我将框设置为动画以扩展到 100% 高度时，框外仍然有文本。

如何使方框延伸到文本的全高。谢谢

HTML:

<div id="cat">
        <div class="about_box">
            <div>
                <h1>Product <br /> Innovation</h1>
                <p>There are important issues to fix in the world.  True innovation in the product medium is about functional innovation-
                performing new jobs for consumers.  They are the physical proof of the brand, but if designed well, also a core brand message themselves,
                and emotional as well as physical beacon.</p>
            </div>
        </div>

CSS:

#cat{
    float: left;
    height: 500px;
    margin-top: 30px;
    width: 960px;
}

.about_box{
    background-color: #FFFFFF;
    display: inline-block;
    height: 190px;
    margin-right: 20px;
    width: 200px;
    z-index: 100;
    float:left;
    margin-right:25px;
}

.about_box > div {
    background-color: #191919;
    display: inline-block;
    height: 150px;
    padding: 20px;
    width: 160px;
    z-index: 100;  
}

.about_box > div h1{
    color: #FFFFFF;
    font-size: 25px;    
}

.about_box > div p{
    color: #FFFFFF;
    display: none;
    float: left;
    font-size: 18px;
    margin-top: 5px;
    position: relative;
    top: 5px;
    width: 170px;
    height:100%;
}

.about_box:nth-child(1) > div:hover{
    background-color:gold;   
}

.about_box:nth-child(1) >div:hover p{
    color:black;
}

.about_box:nth-child(1) >div:hover h1{
    color:black;    
}

jQuery

    $( document ).ready(function() {
$('.about_box > div').hover(function() {
        $(this).clearQueue().parent().css('z-index', '10000')
        $(this).clearQueue().find("p").css('display', 'block')
        $(this).animate({
            width: 160, height: "100%", margin: 0,
        });
    }, function() {
        $(this).clearQueue().parent().css('z-index', '100')
        $(this).clearQueue().find("p").css('display', 'none')
        $(this).animate({
            width: 160, height: 150, margin: 0,
        }, function() {
            $(this).parent().css('z-index', '0');
        });
    });
      });

和 jsiffdle http://jsfiddle.net/2W2dQ/

Answer 1

您可以结合使用 css 和 jquery。像.slideToggle()这样你仍然可以支持IE9及以下版本

http://jsfiddle.net/uxkDC/