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/

Answer 2

您根本不需要使用JavaScript来解决此问题。使用CSS transition可以用更少的代码和复杂性实现相同的效果：http://jsfiddle.net/2W2dQ/18/

Div没有采用jquery动画的全高度

2 个答案: