Jquery to fade in and out

by Matthew Day

HTML

<div><br/><strong>Click Me!</strong></div>

CSS

div {
    height: 60px;
    width: 100px;
    border-radius: 5px;
    background-color: #69D2E7;
    text-align: center;
    color: #FFFFFF;
    font-family: Verdana, Arial, Sans-Serif;
    opacity: 0.5;
}

JavaScript

$(document).ready(function() { //Once the document is ready, run these enclosed functions.
    $('div').mouseenter(function() { //When the mouse hovers the div,
        $('div').fadeTo('slow', 1); //fade its opacity to 1
    });
    $('div').mouseleave(function() { //When the mouse leaves the div,
        $('div').fadeTo('slow', .5); //fade its opacity to 50%.
    });
});