13 Excellent jQuery Animation Techniques
Only a few years ago, if something was animated on a website it was automatically assumed to be Flash. However, this is not the case today. With the growing popularity and wide spread use of JavaScript frameworks, sometimes you have to take a closer look to find out what is powering all of those smooth animations.
With several JavaScript frameworks available, jQuery is quickly becoming a favorite. If you are interested in using jQuery for animated effects, here are 13 excellent tutorials to get you on your way.
Building an Animated Cartoon Robot with jQuery
Animate a hover with jQuery
How To Create A ‘Mootools Homepage’ Inspired Navigation Effect Using jQuery
CSS Sprites2 – It’s JavaScript Time
Build An Incredible Login Form With jQuery
Learning jQuery: Revealing Photo Slider
Learning jQuery: Fading Menu – Replacing Content
Using jQuery for Background Image Animations
Animated Menus Using jQuery
Create a Cool Animated Navigation with CSS and jQuery
Animated Drop Down Menu with jQuery
jQuery Tutorials for Designers
How to Load In and Animate Content with jQuery
Related Posts
Here's some other articles that you will definitely find useful.
7 Fresh and Useful jQuery Plugins
10 jQuery Plugins that Will Make your Life Easier
8 jQuery Plugins for Enhancing Typography
9 jQuery Mistakes you Shouldn’t Commit
8 Responsive jQuery Slider Plugins
71 comments
Data Entry
July 23, 2010I prefer jQuery over flash now, feels like you can do more with it and browsers dont take a poop like they do with flash some times
Alan Green
November 10, 2010I think saying you can do more with jQuery than Flash is a bit naive. Moving from the Flash Drawing and Bitmap API’s to HTML5 is like going back in time 10 years.
Tony
September 14, 2011I guess he never really knew how to use Flash..?
Pat
November 1, 2011Depends on what you want to do. In many cases people use flash to do simple animation which you can do with jQuery. In that sense, you have more flaxibility with jQuery and jQuery is an alternative to Flash.
Elliot
November 7, 2011What would you want to do with Flash anyway? A video or a cartoon? This might be a lack of imagination but I can’t think of anything else that flash would do better to be honest. Even the video part is becoming a thing of the past.
Ron
October 25, 2011It’s more than a year since that post and it is still more than a bit naive. In fact that totally idiotic notion is being spread all over the net.
Mark M.
January 24, 2012YES! It is absolutely ridiculous for people to think that jQuery could possibly replace Flash for anything except simple, short animations:
>Flash would still remain the standard if Apple hadn’t shanked it
>Flash does much more than simple animation…hello?
>jQuery, as much as I like it, is way too CPU intensive to be taken seriously as an animators tool…
Claudio Catania
August 5, 2010How do i get updates sent to my email when you update the blog? I been browsing your website for a while now and wouldnt mind a heads up.
Henry
August 9, 2010In the upper right hand corner there is a subscribe link.
Layla the Gamer Girl
August 27, 2010Unbelievable, that’s just what I was searching for! You just spared me alot of digging around
Thomas Hunter
September 4, 2010Here’s a fun animation I built, it resembles the Android Nexus live wallpaper:
http://www.renownedmedia.com/blog/android-nexus-neural-network-live-wallpaper-in-jquery/
Tanay
September 15, 2010Unbelievable, that’s just what I,m Searching only jQuery And this site have Unbelivable jquery animation scripts
Web Design Hippo
September 23, 2010awesome animations here. It really goes to show you that jQuery is slowly going to be a replacement for flash applications online!
Web Dizajn
October 4, 2010Very Nice! Thx!
Naoshad Nayeem
October 7, 2010Very useful. Thanks a lot to the author!
tuba
June 13, 2011pretty nice tutorial, specially the first one- animation. thank you
Michelle
July 25, 2011great JQUERY animations, looking forward to study them all for my internship site.
Moksha
November 26, 2011nice collection thanks for sharing
Joe@Michigan Web Design
January 25, 2012Never hard to find jquery code! Good list…though the animated cartoons still require a good graphic designer…if only jquery could do that also!
Ahmet ŞEN
March 23, 2012“Build An Incredible Login Form With jQuery” very nice. thanks for archive..
mohsen
March 26, 2012Very Nice! Thx!
4 Trackbacks
[...] week, I showed you what could be done with jQuery. Now let’s take a look at these 11 tutorials and see what kinds of things MooTools can do for [...]
[...] are 11 excellent methos for creating tooltips using various solutions such as jQuery, MooTools, and CSS [...]
[...] the solutions listed below are all a breeze to set up, especially since most of them are built on jQuery or [...]
[...] You’ve probably noticed that a lot of websites lately have a featured area with content that slides or changes in some way. This is a great technique to show several pieces of content in a limited amount of space and a good way to engage the user. If you’ve been wondering how this is accomplished, here are 13 very useful tutorials and scripts that will help you create these types of effects using jQuery. [...]