Categories

Apply fading (or various) transition effects on HTML (image) buttons using CSS image sprites with a simple jQuery script

Donate with

82uymVXLkvVbB4c4JpTd1tYm1yj1cKPKR2wqmw3XF8YXKTmY7JrTriP4pVwp2EJYBnCFdXhLq4zfFA6ic7VAWCFX5wfQbCC

Copy Monero Donation Address

Donate with

Donate BAT now

Verified BAT publisher

Howto add fade effects to HTML/Image elements using CSS sprites with jQuery

The problem(s)

We are using one large image containing all the images for a website and then access each and every element with the CSS-Property "background:url('image.jpg') 0 0 no-repeat" where we overgive the background-image the needed X- and Y coordinates for accessing the proper icon on the image (sprite).

While this enhances loading times, there are different problems:

1. We cannot simply create a CSS3 animation over this CSS sprite because if add a fade animation we're facing the problem that the browser will simply scroll across the whole "sprite" image instead of properly fading out/in.
2. It would be very difficult to use CSS3 animations to solve this problem. Also, CSS3 is still not cross-browser compatible. Internet Explorer 9 still has no proper CSS3 fading capabilities.

That's why we decided to solve this using jQuery. But jQuery some flaws as well:

1. You cannot use the addClass() / removeClass() functions to simply add a hover class to an element. The reason: both functions do not allow to apply any kind of animation except setting a delay.
2. If you know jQuery you will now think of the jQuery UI classes. The current version (1.10) contains an extended addClass() function which allows various transition effects. It would work beautifully but unfortunately the class cannot handle CSS background or background-image properties. This means it will not be possible to use the jQuery UI framework either if you try to animate your HTML button that's based on a background-image (sprite).

The solution

We've created a simple jQuery script that takes care of this and allows you to animate E V E R Y T H I N G you like to be animated - even background-images.

It works like this:

1. Create the element you want to be animated (faded, whatever):

   <a id="nav_1">MyLink</a>

   Please take note of the "hoverfade" class that's being assigned to this element. We're gonna need this class so that our jQuery script knows which element(s) need to be animated. The jQuery script will simply select all elements that have this class. But yes, of course, you can change the jQuery code to your needs and e.g. adress all a-tags instead.

2. You would have the "nav1" element designed using CSS like this:

   #nav_1 {position: relative; display: block; width:214px; height:39px; background:url('sprite.jpg') 0 -199px no-repeat;}

3. Now define the hoverfade effect simply by using CSS like this:

   #nav_1 .hoverfade {position: relative; display: block; width:214px; height:39px; background:url('sprite.jpg') 0 -444px no-repeat;}

   Watch out for a space between the ID of the element and the ".hoverfade" class description. It might seem wrong but it's correct like this because if you check the jQuery script below you will see that it will first select the a-tag with the class 'hoverfade', then append a span-tag right after the a-tag which also has the class 'hoverfade' assigned. The jQuery script then sets the opacity of the a-tag to zero (0=invisible) and does an animated fadeIn to 100% opacity of the span-tag.

4. As you can see, with this method, we simply define a sub-class for the #nav_1 selector containing another background-image position. You can use whatever other property you like on the hoverfade CSS tag and fade the two elements with various effects. You could use a blind-effect as well.
5. Create a javascript function with the following code:

   function hoverFading() {
   
           jq(".hoverfade").each(function() {
   
               var appendstring = "";
   
               jq(this).append(appendstring);
   
               jq(this).find(".hoverfade").css("opacity", 0);
               jq(this).hover( 
                   /* define mouseenter() event */
                   function() {
                       jq(this).children(".hoverfade").stop().fadeTo(250, 1.00);
                   },
                   /* define mouseleave() event */
                   function() {
                       jq(this).children(".hoverfade").stop().fadeTo(250, 0.00);
                   }
               );
           });
       }
   

6. This code will:
   1. Search for all HTML tags that have the class "hoverfade" assigned
   2. It'll add a span-tag with the class "hoverfade" to all these elements
   3. Set the span-tags' opacity to 0 (=hidden)
   4. Assign the jQuery fadeTo effect (which changes the opacity property of an element) to the hover-event to each of the hoverfade-elements.
7. That's pretty much it. Now you only need to tell jQuery to call this function as soon as the document's ready:

   $(document).ready(function() {
       hoverFading();
   });