Smoothing the fading in of a div as I hover over another div

Dear Stackoverflow readers,

Using jQuery, is there a way for me to smooth out the fading in of my .moreBio after hovering over .biography ?

I have two problems with my code right now:

The first time I hover over the .biography , .moreBio instantly fades in when I want it to fade in to opacity: 1 in 0.5s .

The second time (and every other time afterwards), .moreBio instantly jumps from opacity:0 to opacity:1 really quick, showing no smooth transition from 0 to 1 in 0.5s .

I can transition .moreBio using CSS, however, I want to hide .moreBio whenever I'm not hovering over .biography , and I figured that jQuery gives me that option.

Here is my code:

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

And here is the JSFiddle .

Thanks in advance, if my question is unclear please tell me.

Problem courtesy of: Tony

Solution

I have updated your JSFiddle . I added the same kind of animation than for your .moreBio but with the oposite opacity. When you hover the #playerInfoMsg the div fade to a 0 opacity.

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

Solution courtesy of: jadok

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章