Geek Answers Handbook

Automatically animate all freezes using jQuery

On my new site, I have several different freezes for links. One swap background image for logo. One scatters another background image for the main navigator. And regular inline links change background colors through CSS. I can't figure out how to automatically use all the a tags, gracefully animating their hover state.

It doesn't seem very clean (or promising) to manually code animation methods for each of these types of links. It doesn't seem like my background image URLs and link colors (which should be in CSS) fit in JS. And it doesn't seem right to create a special class for each instance of the hover effect, and then animate adding / removing this class via jQuery, when there might be a way to use the default hover behavior that CSS provides.

So, I just wanted to find out if there is a way to get jQuery (with or without jQuery UI) to cross transition between a and a: hover states that are already defined in my CSS. All a: hover states work as expected, but the transition is too sudden, and I want to add a fade transition between the hover / non-hover state of each element.

Any suggestions? Here is one example of CSS hover states in which I would like to animate a transition:

#logo a, #logo a:visited { background: url('logo_black.png'); } #logo a:hover { background: url('logo_white.png'); }
+4
source share
2 answers

The real way to do this is through CSS transitions ( https://developer.mozilla.org/en/CSS/CSS_transitions ) that allow the browser to handle all the animation between the two states for you.

However, they are not yet supported in any browser other than Webkit (although they are designed for Firefox 4).

If you want them to work in other browsers, you could study using the jQuery plugin, for example: http://www.azarask.in/blog/post/animation-css-transitions-jquery-easy/

Personally, I would recommend not embedding them in JavaScript at all, and let browsers that do not support transitions degrade competently. Although today you will not have excellent browser support, you will eventually and without any additional effort on your part.

Progressive Improvement - Best BEST friend web developer. In particular, on this day and age of new technologies, new devices and new browsers are released every week.

+2
source

I ended up moving on to something like this:

 $('#logo, #left_nav li').css({ opacity: 0.6 }); $('#logo, #left_nav li').hover(function(){ $(this).stop().animate(); $(this).animate({ opacity: '0.99'}, 250); },function(){ $(this).stop().animate(); $(this).animate({ opacity: '0.6'}, 250); });

The background image of these elements is 33% transparent.

I set the opacity for each element to 0.6 (on document.ready) to get a transparency of 20%. The logo has been modified to have a certain opacity relative to this value.

In hover mode, I set the opacity back to its full value and animate the change. The logo disappears to 100% opacity, the background disappears to 33% opacity. There is also some stop () code to prevent an unwanted mix of effects.

I will add something similar for inline text links. There is not enough code to bother me, especially if there is no cleaner way to get the same effect for all links in jQuery.

0
source

More articles:


All Articles