O'Reilly logo

Mastering jQuery by Alex Libby

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Converting animations to use CSS3 automatically

We've built a tooltip plugin which uses a touch of animation to fade in and out when hovering over elements marked with the .tooltip class. Nothing wrong in that – the code works perfectly well, and is an acceptable way of displaying content…right? Wrong! As you should know by now, we can definitely do better. Here's why I chose the tooltip as our example.

Remember how I mentioned back in Chapter 6, Animating in jQuery, that we should consider using CSS3 styling to control our animation? Well, here's a perfect example: we can easily change our code to force jQuery to use CSS3 where possible, or fall back to using the library for older browsers.

The trick behind it is in one line:

<script src="js/jquery.animate-enhanced.min.js"></script> ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required