Proper Hovers

Showing how to handle hovering on and off correctly

HTML

<div id="correctHover" class="bigBox">Correct Hover<div class="fader"><p>FADE</p></div></div>
<div id="incorrectHover" class="bigBox">Incorrect Hover<div class="fader"><p>FADE</p></div></div>

CSS

body{
    font-family:"Helvetica", Arial, sans;
}

.bigBox{
    width:200px;
    height:200px;
    border: 4px solid black;
    background: white; 
    float:left;
    margin-right:10px;
}

.fader{
    display:none;
    position:relative;
    left:50px;
    top:35px;
    background: black;
    width:100px;
    height:100px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
}
.fader p{
    color:white;
    text-align:center;
    padding-top:40px;
}

JavaScript

//correct way to do fading in and out
$('#correctHover').hover(
    //mouseover
    function(e){
        $(this).children('.fader').stop().fadeIn('fast');
    },
    //mouseout
    function(e){
        $(this).children('.fader').stop().fadeOut('fast', function(e){
            $(this).css('opacity', 1.0);//fixes a big with fadeIn/fadeOut
        });
    }
);

//incorrect way to do fading in and out
$('#incorrectHover').hover(
    //mouseover
    function(e){
        $(this).children('.fader').stop().fadeIn('fast');
    },
    //mouseout
    function(e){
        $(this).children('.fader').stop().fadeOut('fast');
    }
);