Warning: include(/home/jakelaue/public_html/comments/comment.php): failed to open stream: No such file or directory in /home2/jakelaue/isthatclear/jquery/bgFade/index.php on line 10

Warning: include(): Failed opening '/home/jakelaue/public_html/comments/comment.php' for inclusion (include_path='.:/opt/php54/lib/php') in /home2/jakelaue/isthatclear/jquery/bgFade/index.php on line 10
Clarity Design - bgFade Plugin

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

Update 09/16/2010:




Update 08/30/2010:




Update 07/03/2010:


Show Demo


Fade in and out using default settings



Fade and animate down 15px and back up



Fade to and from 0.5 opacity



NEW! Linking your button









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
});


top (integer - image location):

This is the number of pixels the hover image would be offset from the top. 0 by default. Can be set in CSS.

left (integer - image location):

This is the number of pixels the hover image would be offset from the left. 0 by default. Can be set in CSS.

height (integer - image size):

This is the number of pixels tall the hover image would be. Defaults to the css setting.

width (integer - image size):

This is the number of pixels wide the hover image would be. Defaults to the css setting.

fadeSpeed (integer in milliseconds):

This is the speed the hover image fades in and out. Defaults to 200

fadeToOpacity (number <= 1):

This is the opacity the hover image will fade to. Defaults to 1.

animate (Boolean):

This determines whether or not the hover image will animate to the specified positions. If top, left, height, and width are all set to 0, animate's value does not affect how it looks