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

Question

亲爱的 Stackoverflow 读者，

使用 jQuery，有没有办法让我在将鼠标悬停在 .biography 上后平滑淡入我的 .moreBio？

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

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

第二次(以及之后每隔一次)，.moreBio 立即从 opacity:0 跳到 opacity:1 非常快，显示 0.5s 内没有从 0 到 1 的平滑过渡。

我可以使用 CSS 转换 .moreBio，但是，每当我不将鼠标悬停在 .biography 上时，我想隐藏 .moreBio，我认为 jQuery 给了我这个选项。

这是我的代码:

HTML

<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>

CSS

.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: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;
}

jQuery

$(document).ready(function() {

    $('.moreBio').hide();
    $('.biography').hover(function(e) {
        $(this).find('#playerInfoMsg').html('Player Info');
        $('.moreBio').fadeIn(2000);
    }, function() {
        $(this).find('#playerInfoMsg').html("Hover For Player Info");
        $('.moreBio').hide();
    });
});

这里是 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;
}