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 08/30/2010:

Linking support! Check the new button (fourth one down) in the demo!

Update 07/03/2010:

Support for Opera added
Fixed fading issue when fadeToOpacity is less than 1

Note: To make the plugin work in Opera, you MUST specify height, width, top, and left!

Show Demo

Fade in and out using default settings

$(this).bgFade('fadeIn');

$(this).bgFade('fadeOut');

Fade and animate down 15px and back up

animate: true

Fade to and from 0.5 opacity

NEW! Linking your button

This is a link

All you need to do to link is add your <a href="http://yoursite"></a> inside the element you're bgFading. You can put text in the link, but make sure you hide it in CSS, or it'll show up.

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. Bold items are required!

.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;
   display:none;
   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

Select Language English German Greek Portuguese (BR) Russian

Comments (26)

Fade Out

In the last example, if you hover over it, and then move off, and then move back on before it fades all the way out, you can get it to become fully opaque.

#1 - Bryce Driesenga - 05/06/2010 - 15:42

#1 true...but anyway...its a nice effect.

well done

#2 - Joe Hana - 05/06/2010 - 15:49

DI.

Really super and simple jQuery plugin. Thx for sharing.

#3 - Herrhumi - 05/07/2010 - 02:21

Web Text Would Be Nice

Hi, I've been working on a similar method, only trying to retain real web text in the buttons (rather than using images for the text). Haven't quite got a solution I am happy with yet, but take a look:

http://www.mightymeta.co.uk/animating-opacity-of-background-image-in-jquery-without-affecting-child-elements/

#4 - James Brocklehurst - 05/07/2010 - 03:32

Touch Screen?

Nice enough, but will these sorts of roll over effects become redundant with the new touchscreen devices of the future?

#5 - David - 05/07/2010 - 04:54

Awesome

This is very very nice stuff!!!

#6 - Joel - 05/07/2010 - 06:27

Replies

@Bryce - I am aware of this problem, hopefully it will be fixed in the next iteration.

@Everyone else - Thanks!

#7 - Admin - 05/07/2010 - 22:07

Problem if browser

IEs
Opera

#8 - Fernando - 05/17/2010 - 14:21

Adding in links?

Hi, this may be a stupid question, but how do you go about adding in links to other webpages using the buttons?

Thanks

#9 - Darkhost - 05/24/2010 - 14:42

Works Perfect on my car transport site

Use this on my car transport site instead of bulky applets, thanks!

#10 - Car Transport - 06/15/2010 - 07:15

Thanks for information!

#11 - Ann - 06/17/2010 - 06:38

confused a bit by the rollover

When I look at your source code, I don't see where you have to images ever being swapped out. I just see the one png file in both "abutton" references. So how do you get the two different images? I'm trying to do the "myButton2" animation but can't get it to work. You can visit my home page and the bottom left is where I want to apply this animation (right now it is a simple rollover with no smoothing).

I would appreciate any kind of help!

Thanks!!

#12 - trevor - 06/17/2010 - 19:22

The way this works is that it uses a single PNG image. See the image here: http://www.isthatclear.com/jquery/bgFade/button.png

If you'll notice, the CSS changes the offset of the background image. The hover class for the span element has this as for the background image: background:url('button.png') no-repeat 0px -75px;

That way, you don't have to wait for the hover image to load, because the whole image loads. This link will tell you more about how it works: http://www.switchonthecode.com/tutorials/css-tutorial-the-background-position-property

#13 - Admin - 06/19/2010 - 00:56

How come it doesn't work in Opera?

By using jQuery, you inherit support for all modern browsers. Use that support, please.

#14 - Horia Dragomir - 07/03/2010 - 01:48

ADMIN COMMENT: Now works in Opera!

After a bit of struggling with the code, this plugin is now Opera compatible! See the notes at the top of the page for some new requirements.

#15 - Administrator - 07/03/2010 - 20:24

Thank you for adding Opera support!

Sometimes, things can get tricky.
Thank you for sorting it out!

#16 - Horia Dragomir - 07/04/2010 - 03:02

Thanks a lot for sharing this wonderful article.....

#17 - opossum trap - 08/05/2010 - 04:49

Not working for me.

This is perfect for me, but it's not working for me. I've put this css in:
.myButton {
position:relative;
height: 373px;
width: 250px;
cursor:pointer;
display:block;
background: url("_images/graphic.jpg") no-repeat top left;
}

.myButton span.bg_fade {
position: absolute;
display:none;
top: 0;
left: 0;
height: 373px;
width: 250px;
background:url("_images/graphic.jpg") no-repeat 0px -373px;
}

this html in:

and this code in the header:
$(".myButton").hover(function(){
$(this).bgFade('fadeIn');
}, function() {
$(this).bgFade('fadeOut');
});

any ideas why this isnt working?

#18 - ryan - 08/09/2010 - 14:43

the html is just "" and then a closing div. do i need to put anything in the div?

#19 - ryan - 08/09/2010 - 14:44

ADMIN COMMENT: Nothing required inside div

Nope, nothing goes in the div. I'll add link support soon, like I did for the Cursor Hover plugin.

#20 - Administrator - 08/11/2010 - 20:31

Link support for button

Maybe I've overlooked something really obvious but how do you make the button a link so that it actually goes somewhere once it's clicked on?

Many thanks,

Ryan Mc

#21 - ryan - 08/16/2010 - 05:15

solar panel

Maybe I've overlooked something really obvious but how do you make the button a link so that it actually goes somewhere once it's clicked on?

#22 - ROLEX REPLICA WATCHES - 08/23/2010 - 01:58

For this matter, once I discussed with one of my friends, not only about the content you talked about, but also to how to improve and develop, but no results. So I am deeply moved by what you said today.

#23 - nfl jersey - 08/24/2010 - 01:52

abten

Thank you for sharing with us,I too always learn something new from your post!

#24 - Projector Lamp - 08/26/2010 - 00:40

link support

PLEASE PLEASE enable making links clickable. I love bgFade but I can't make my navigation menu links possible with this!

#25 - Jimmy - 08/30/2010 - 15:08

Always good to see, this was a brilliant post. In theory I would like to write like this too. You need time to creat that interesting and additionally real effort to make such a good article.

#26 - lacoste shoes - 08/31/2010 - 02:15

Name

E-mail (Will not appear online)

Homepage

Title

Comment

To prevent automated Bots form spamming, please enter the text you see in the image below in the appropriate input box. Your comment will only be submitted if the strings match. Please ensure that your browser supports and accepts cookies, or your comment cannot be verified correctly.