jQuery Background Animation | Web Development Services by Ed Nailor

jQuery Background Animation

Print Friendly

I just completed work on a project that required the use of background animations. The task was to make a header background “shine” when you hovered over the section. My first approach was to use CSS3 transitions by placing a background image with a “shine” effect in place and then using the transitions to slide the background into place quickly, which worked extremely well… until I checked it out in Internet Explorer. Damn IE!

IE 10 worked just fine, but IE 9 and older does not support CSS3 transitions. So I began looking for some jQuery magic. There are some pretty cool examples online, one that I thought was exactly what I needed. ( http://snook.ca/archives/javascript/jquery-bg-image-animations ) However, while the example was working perfectly in older versions of IE, I could not get it to work on the WordPress site I was developing. What the hell?

Turns out that the example was using jQuery version 1.2 and the theme I am developing was at 1.8… big difference, and the code was not working. So I spent hours trying to find a way to fix it.

Finally, a mental break through. While the background animation ( jQuery animate ) was not working for the background, it did work with div widths. So, to make it work, here is what I did…

First, I created a div and set it to the height and width of the area I needed to cover. This was 225px wide and 55px tall. Then I set the overflow to hidden on this div. Inside the div, I placed another div and using css I made the width 0px and the height 55px. I then attached my “shine” background to the div, setting it to the right of the div. Finally, using jQuery animate, I then had the inner div expand to a width just wider than the parent div in order for the “shine” to slide out of view (thank you overflow: hidden). Now when you hover over the parent div, the animation div quickly expands and the background image stays attached to the right, so you get this cool flash of “shine” running across the header and then off and out of view.

The effect works across all of the main browsers, even IE back to 7!

Just thought I would share the thinking behind this. If I have time, I will set up a demo… but for now, I will simply have to share the thinking for those it may help.



Comments are closed.