Question

亲爱的Stackoverflow读者，

使用jQuery，有没有办法让我在悬停在.moreBio之后消除{{1}}的淡入？

我的代码现在有两个问题：

当我第一次将鼠标悬停在.biography上时，.biography会立即淡入，我希望它在.moreBio中淡入opacity: 1。

第二次（以及之后的所有其他时间），0.5s立即从.moreBio立即快速跳转到opacity:0，显示opacity:1的{{1}}没有平滑过渡}}

我可以使用CSS转换0 to 1，但是，每当我没有悬停在0.5s上时我想隐藏.moreBio，我认为jQuery给了我这个选项。

这是我的代码：

HTML

.moreBio

CSS

.biography

的jQuery

<div class="biography">
    <p id="playerInfoMsg">Hover For Player Info</p>
    <br>
    <p class="moreBio">Favorite Hero
        <br>
        <img src="http://hydra-media.cursecdn.com/dota2.gamepedia.com/7/72/Terrorblade.png" width="256" height="144" alt="Favorite Hero">
        <br>Terrorblade
    </p>
</div>

这是JSFiddle。

提前致谢，如果我的问题不清楚，请告诉我。

Answer 1

我已更新您的JSFiddle。我添加了相同类型的动画，而不是.moreBio但具有相反的不透明度。当您将#playerInfoMsg div淡入淡出为0不透明度时。

.biography {
    letter-spacing: 1px;
    width: 120px;
    height: 60px;
    float: left;
    margin: 5px;
    background: #3399FF;
    color: #ffffff;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
    position: relative;
    font-weight: bold;
    font-size: 15px;
    text-align: center;
    padding: 10px;
    border-radius: 5px;
    opacity: 0.4;
    transition: all 0.6s ease;
    -webkit-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
}
.biography:hover {
    display: block;
    width: 360px;
    height: 450px;
    opacity: 1;
    background: #7C7C7C;
}
.moreBio {
    opacity: 0;
}
.biography #playerInfoMsg
{
    opacity : 1;
}
.biography:hover #playerInfoMsg
{
    opacity: 0;
    transition: opacity 0.5s ease 0.5s;
    -webkit-transition: opacity 0.5s ease 0.5s;
    -o-transition: opacity 0.5s ease 0.5s;
    -moz-transition: opacity 0.5s ease 0.5s;
}
.biography:hover .moreBio {
    opacity: 1;
    transition: opacity 0.5s ease 0.5s;
    -webkit-transition: opacity 0.5s ease 0.5s;
    -o-transition: opacity 0.5s ease 0.5s;
    -moz-transition: opacity 0.5s ease 0.5s;
}

当我将鼠标悬停在另一个div上时，平滑div的淡入淡出

1 个答案: