jQuery menu with animated gif image for rollovers

jQuery menu with animated gif image for rollovers
jquery, rollover, animated, gif, background

Added: 2009-05-22 20:33:14

I needed to create a rollover effect for a navigation menu that had similiar appearance to a flash button but did not involce flash.

So became the jQuery menu with animated gif background that only fades in on mouseover and fades out on mouse out.

The following uses the jQuery Color Plugin .

And of course jQuery

The code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Stars</title>

<script type="text/javascript">
/* $(document).ready(function(){

$("a").hover(function () {
$(this).animate({
        backgroundColor:"none",
      }, 1500 );

    });

});
*/
$(function()
{

var container = $(".stars");
container
    .hover(


      // fade background div out when cursor enters and change the color of the text to yellow,
      function()
      {
        $(".background", this).stop().animate({opacity:0},1500);
        $("a", this).stop().animate({color:"yellow"},2500);
      },
      // fade back in when cursor leaves and fade the color back to white
      function()
      {
        $(".background", this).stop().animate({opacity:1},1500) ;
        $("a", this).stop().animate({color:"#fff"},2500);
      })
    // allow positioning child div relative to parent
    .css('position', 'relative')
    // create and append background div
    // (initially visible, obscuring parent's background)
    .append( $("<div>")
      .attr('class', 'background')
      .css({
        backgroundColor:'black',
        position: 'absolute',
        top:0,
        left:0,
        zIndex:-1,
        width:container.width(),
        height:container.height()
      })
    );
});

</script>

<style type="text/css">

#nav .stars { display:block; width:370px; height:105px; background-color:#000; text-align:center; font-size:50px; float:left; }
#nav .stars { background-image:url(wildstars.gif); z-index:1; }
a { color:white; display:block; width:370px; height:85px; padding-top:20px; text-align:center; font-size:50px; z-index:1000; }

</style>

</head>

Twitter Updates