jquery - div里面的H1取消jQuery动画

Question

我有一个 jQuery 动画的问题，我在一个页面上有 5 个框，在每个框上都有一个悬停处理程序来扩展框并显示一些额外的文本。在每个框中都有带有一些文本的 h1 标签。 h1 标签从那里开始(没有悬停)并在你悬停时停留在那里，问题是当我将鼠标悬停在 h1 标签上时动画停止并且框缩回到原始状态(就像没有悬停)

这是 jsfidle，只需将鼠标悬停在框上，然后是“为什么”(h1)这个词即可查看问题所在。即使我将鼠标悬停在 h1 上，我也希望该框保持扩展状态。谢谢

HTML:

 <div class="box">
        <h1>why</h1>
        <div>
            <p>test</p>
        </div>
    </div>

CSS:

 .box{
    background-color: white;
    display: inline-block;
    float: left;
    height: 320px;
    margin: 0 155px 40px 0;
    position: relative;
    width: 320px;
    z-index: 1000;
}

.box > div {
    display: inline-block;
    width:280px;
    height:280px;
    padding:20px;
}

.box > div p{
   color: #FFFFFF;
    display: none;
    float: right;
    font-weight: bold;
    margin-top: 5px;
    position: relative;
    top: 28px;
    width: 450px;
}

.box h1{
    font-size: 40px;
    height: 0;
    padding-top: 0;
    position: relative;
    text-align: center;
    top: 32%;
    font-family: 'DeftoneStylus';
}

.box:nth-child(1) > div{
    background-color:red;   
}

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

.box:nth-child(1):hover h1{
    color:#94C11F;    
}

j查询:

 $( document ).ready(function() {

    $('.box > div').hover(function() {
        $(this).clearQueue().parent().css('z-index', '10000')
        $(this).clearQueue().find("p").css('display', 'block')
        $(this).animate({
            width: 785, height: 280, margin: 0,
        });
    }, function() {
        $(this).clearQueue().parent().css('z-index', '100')
        $(this).clearQueue().find("p").css('display', 'none')
        $(this).animate({
            width: 280, height: 280, margin: 0,
        }, function() {
            $(this).parent().css('z-index', '0');
        });
    });
});

http://jsfiddle.net/Bfxem/

Answer 1

您可以在 div 和 position: absolute 中移动 h1

HTML:

<div class="box">
    <div>
        <h1>why</h1>
        <p>Our purpose, our difference. We are a ...</p>
    </div>
</div>

CSS:

.box h1 {
    position: absolute;
    text-align: center;
    top: 32%;
    left: 30%;
}

参见修改后的 JSFiddle