Animating {background-image} Opacity In JQuery Without Affecting Child Elements

April 29, 2010 by James Brocklehurst | 29 Comments

When first learning JQuery I was frustrated at the inability to animate a simple fade-in fade-out on images set using the CSS background-image property. Workarounds involving the appending and fading of additional HTML elements have been around for a while but prevent you from using web-text within these elements – no good for accessible or CMS editable menus.

With a bit of fiddling, I’ve come up with a solution.

Demo

Download ‘backgroundfader.js’

The Challenge

I wanted to use JQuery to unobtrusively apply a fade effect to a menu that used the CSS :hover pseudo-class to switch between two background images. The HTML should be just as you’d expect – a standard unordered list, and without JavaScript enabled, the CSS should work as normal. I also wanted the words on my buttons to be web text, rather than images of the text, so it could be enlarged (for accessibility) and edited in the source HTML (good for CMS’s, makes updating less hassle). Judging by a quick search on Google, a lot of other people wanted to do this too. There were a couple of problems to overcome however.

Problem 1: JQuery Can Only Animate Numeric CSS Values

The JQuery .animate() method can be used in conjunction with .hover() method to get CSS stuff to happen incrementally as the mouse enters or leaves an element. It only works with CSS values that are numbers, however, which is fine if you want to reposition or scale things, but no good if you want to deal with the background-image property, which relies on keywords.

There are two main solutions out there which attempt to deal with this:

Jonathan Snook came up with a clever way of animating the position of a background image made from different shapes and gradients to create a range of effects. These look good, but don’t allow you to fade between two independent images, which is what I was after.

Dragon Interactive are well known for their ‘Pufferfish’ technique which appends an additional styled <span> or <div> element to the relevant part of the DOM, which is then faded in and out on mouseIn/mouseOut. Much closer to what I required, but you can only use text created as an image, because of problem number 2…

Problem 2: Fading With Opacity Makes All Child Elements Fade Too!

opacity is a CSS property that uses numeric values to determine how transparent the selected element is. 1 = fully opaque, 0= fully transparent, 0.5 = 50% opacity. Because the values are numeric means that JQuery can alter them over time using the .animate() method. Using opacity has a major flaw however – it is inherited by all children of the selected element. This means that any text or other content contained with the faded element also fades, not desirable if you are making a menu.

Here is a demo to illustrate the problem.

Solution – With Thanks to Nick O’Brien

Nick O’Brien has a JQuery plug-in called ‘backOpacity‘ which gives you a new method to play with which allows you to apply opacity just to an element’s background. It works by appending a new <div> behind the selected element, giving it a width and height based on the selected element, and putting it in place with absolute positioning.

backOpacity() then takes a couple of parameters to specify the colour and opacity of this new background element.

This was more what I was after, but still has limitations – it doesn’t work with background-image, only background-color, and doesn’t include any options for animating the opacity value.

What I have done is taken Nick’s code and worked out a way to make it work with background-image, plus given it animation capabilities.

I’ve also tried to make the technique as unobtrusive as possible, so there is no extra markup or JS in the HTML, and with JS turned off, everything behaves as normal (i.e. you just get a simple CSS hover image switch).

Here is a demo (Works in FF, Chrome, Safari & Opera – ~~Won’t work in IE I’m afraid~~ Now works in IE 7+ !)

Instructions

HTML:

Hot link to JQuery on Google Code in your <head> then place the backgroundfader.js file in your site root and link to it in the <head>, after the JQuery include.

Next, create a standard unordered list menu:

   <ul id="nav">
   <li><a href="index.html">Home</a></li>
   <li><a href="info.html">Info</a></li>
   <li><a href="gallery.html">Gallery</a></li>
   <li><a href="contact.html">Contact</a></li>
</ul>

CSS:

Style the list as you would do normally, with the following exceptions:

You will need to style the <a> elements to include the ‘up state’ image as their background, and the <li> elements to include the ‘hover state’ image. a:hover{} then must set background-image to ‘none’. What this does is place the ‘up state’ image over the top of the ‘hover state’ image by default. When the cursor moves over the <a> element, the ‘up state’ image is removed, revealing the ‘hover’ image underneath.

<a> must also be given a specified width and height to allow the appended <div> to be positioned correctly. You can use % or em units, but the script will convert these to pixel measurements. This presents some limitations, which I will cover at the end.

The code used in the demo is as follows:

#nav {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#nav li {
float:left;
text-align: center;
background-image: url(../images/menu-sprite.png);
background-repeat: no-repeat;
background-position: center -75px;
}
#nav a {
display: block;
width: 120px;
height:30px;
padding:10px 15px;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.1em;
text-decoration: none;
color: #fff;
font-weight: bold;
text-shadow: 1px 1px 1px #666;
background-image: url(../images/menu-sprite.png);
background-repeat: no-repeat;
background-position: center top;
}

#nav a:hover {
background:none;
}

In the spirit of progressive enhancement, we could leave things at this stage, and it will still function. If users do not have JavaScript enabled, the hover effect will still work, it just won’t include the fancy fading effect.

An additional rule needs to be added to style the new appended <div> that the script will create:

#nav li div {
background-image: url(../images/menu-sprite.png);
background-repeat: no-repeat;
background-position: center top;
}

All this needs to do is add the same background image as is used for nav a.

JavaScript:

Open the backgroundfader.js file and configure the following settings:

var selector = "#nav li a";
var hoverOverSpeed = "500";
var hoverOutSpeed = "300";

Specify the element/s that you wish to apply the effect to using the selector variable

Specify the fade in/out speeds (in milliseconds) using the bottom two variables.

That’s it!

What The Script Does

Locates the selected element/s.
Appends a new <div> with the same width and height to the selected element.
Applies CSS to absolutely position the new <div> behind the selected element.
Sets the selected element to {background-image:none;}, thereby revealing the <div> underneath.
Listens for mouseOver/mouseOut events, then animates the opacity of the <div> accordingly, revealing the <li> element underneath as a result.

Benefits

Menu buttons can contain live web text
Text can be resized and selected
Text can be styled with CSS (useful to create ‘selected’ or ‘active’ states)
To edit the button text or add new buttons, simply edit the HTML source

Compatibility

The script appears to work fine in recent versions of Opera, Safari, Firefox and Chrome. It should work fine with JQuery 1.3.2 through to the current iteration, although I haven’t tested it rigourously on all versions.

Err… it doesn’t currently work in Internet Explorer though (surprise!). JQuery itself is giving me runtime errors (?). My script removes the styling for the <a>, but the additional <div> isn’t appended, so the buttons are permanently left in their hover state – not good!

Kudos to Gary Jones who pointed out in the comments that as of JQuery 1.4.4 this now works in IE 7 and above too.

Other Limitations

Because of the way the script works, you need to declare a fixed width and height for the selected element, and everything ends up being positioned absolutely. This means the elements cannot size to fit their content. This is just about excusable in the case of a menu, as long as the text has a lot of space around it to enlarge into, but is more problematic if you wanted to apply this technique to a standard content box.

At present, you can’t really apply this technique to elements that use ‘sliding doors’, as it requires a different way of utilising and styling the available HTML elements.

It could also be made a bit more efficient – sometimes there is a bit of lag on the fade effect.

Needless to say, these are my next challenges – unless someone else wants to come up with some fixes first!

If you enjoyed this post, please consider sharing it using the above buttons, leaving a comment or subscribing to the RSS feed.