02.06.2013 Views

jQuery 1.4 Animation Techniques - Index of

jQuery 1.4 Animation Techniques - Index of

jQuery 1.4 Animation Techniques - Index of

SHOW MORE
SHOW LESS

You also want an ePaper? Increase the reach of your titles

YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.

Fading <strong>Animation</strong>s<br />

A useful point to note is that the arguments do not need to all be provided when only<br />

the callback function is required. If we don't need to set the duration or easing arguments,<br />

we can just supply the callback function and <strong>jQuery</strong> will still execute it at the end <strong>of</strong><br />

the animation.<br />

Enhancing simple CSS hover states with fadeIn<br />

It is standard practice to add hover-states for the items in a navigation menu using CSS, but<br />

with <strong>jQuery</strong> we can progressively enhance simple CSS hover states into full-on animations<br />

that give a much more attractive and pr<strong>of</strong>essional effect when hovered.<br />

In this example, we will see how to:<br />

Disable standard CSS hovers when JavaScript is enabled<br />

Add the additional HTML markup required for the animations<br />

Implement attractive fadeIn() animations triggered by hovering<br />

We'll end up with a navigation menu in which the hover-states are animated into view<br />

instead <strong>of</strong> being shown instantly, as shown in the following screenshot:<br />

[ 22 ]

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!