Jquery 将鼠标悬停在另一个div上时平滑一个div的淡入

亲爱的读者：

使用jQuery，是否有一种方法可以使我的

.moreBio

在鼠标悬停在

.biography

上后平稳地消失

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

当我第一次将鼠标悬停在

.biography

上时，

.moreBio

会在我希望它在

0.5s

中淡入到

opacity:1

时立即淡入

第二次（以后每隔一次），

.moreBio

立即从

不透明度：0

跳到

不透明度：1

非常快，在

0.5s

中没有从

0平滑过渡到1

我可以使用CSS转换

.moreBio

，但是，只要我不在

.biography

上悬停，我就想隐藏

.moreBio

，我想jQuery会给我这个选项

这是我的密码：

HTML

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();
    });
});

这是我的答案

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

我已经更新了您的答案。 我添加了与你的.moreBio相同的动画，但带有oposite不透明度。 当您悬停在

#playerinfomg

上时，div将变为0不透明度。

---

您不需要jQuery来实现这一点。这在纯CSS转换/动画中是可能的。此外，还不清楚和难以理解哪个是女主角和女主角。迪瓦是你的传记吗？请使用正确的类编辑您的questin，这样我们可以更好地帮助您。您通常可以使用css中的“+”来进行编辑。你应该在css中寻找操作符的用法。我将我的问题编辑到正确的类以使其更清晰，对此很抱歉。我编辑帖子以使其更清晰，我相信我的评论让你感到困惑。让我重申一下，我使用jQuery是因为我想在不悬停在

.biography

上时隐藏我的

.moreBio

。然而，由于我使用的是jQuery（而且是一个初学者），我无法使它平稳过渡，因此我在上面的文章中提到了？

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

$(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();
    });
});

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