jQuery animated Hover

With easing

by Roberto Apasajja

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<br>
<div id="target" style="display: none">  XXXXXX  </div>
    <div class="wrapper"> <a class="foo" href="#">
        <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSZxV7yIAxmBAOQQK454aDYPh5oPioFn4S6LpvbneE3B-mdHuKc" class="bigimgsize organizersize has-tip tip-top" data-width="auto" />
    <em>Redd Foxx (Fred Sanford)<br/>PHP User<br/>Comedian</em> 
      </a>

    </div>

CSS

.foo {
    padding: 0;
    margin: 10 2px;
    float: left;
    position: relative;
    text-align: center;
}
.foo em {
    width: 190px;
    height: 35px;
    position: absolute;
    top: 300px;
    left: 6px;
    text-align: left;
    padding: 3px;
    font-weight: bolder;
    z-index: 2;
    display: none;
    color:#FFFFFF;
}

JavaScript

// jQuery animated Hover ------------------------------------------------------------------
$(document).ready(function () {
    $(".foo img").hover(function () {
        $(this).next("em").animate({
            opacity: "show",
            top: "10",
            left: "10",
        }, 1500, "easeOutBounce");
    } // end of show 
    ,
    function () {
        $(this).next("em").animate({
            opacity: "hide",
            top: "300"
        }, 1000, "easeOutBounce");
    }); // End of hide 

//.animate({height: "hide", width: "hide"}, 1500, "easeOutBounce")
//.animate({height: "show", width: "show"}, 1500, "easeOutBounce");
    

}); //end of ready