jQuery bgFade Plugin

This plugin allows you to duplicate the CSS:hover effect, along with some professional jQuery frosting on top. It's as easy as :hover, but lets you do a whole lot more!

Download this example

Show Demo

The HTML

You can name your button element anything you want.

<div class="myButton">
   Any text content you want here
</div>

The CSS

Though you can name your button element whatever you want, you MUST include a span.bg_fade class in the CSS class, as the jquery references this by name.

.myButton {
   position:relative;
   height: 75px;
   width: 500px;
   cursor:pointer;
   display:block;
   background: url('button.png') no-repeat top left;
}

.myButton span.bg_fade {
   position: absolute;
   top: 0;
   left: 0;
   height: 75px;
   width: 500px;
   background:url('button.png') no-repeat 0px -75px;
}

The Javascript

Without any extra options:

$('.myButton').hover(function(){
      $(this).bgFade('fadeIn');
}, function() {
      $(this).bgFade('fadeOut');
});

With extra options:

$('.myButton').hover(function(){
      top: "",
      left: "",
      height: "",
      width: "",
      fadeSpeed: 200,
      fadeToOpacity: 0,
      animate: false
}, function(){
      top: "",
      left: "",
      height: "",
      width: "",
      fadeSpeed: 200,
      fadeToOpacity: 0,
      animate: false
});