Tutorials

13 Excellent jQuery Animation Techniques

Henry JonesJanuary 29, 200976 Comments08.2k

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

Ultimate Grunge Pack: 40 High-Res Textures Previous post

200+ Beautiful Seamless Patterns Perfect for Web Design Next post

Henry Jones

Henry Jones is a web developer, designer, and entrepreneur with over 14 years of experience. He is the founder of WDL and ThemeTrust.

Featured Graphics How-To Inspiration Tutorials Uncategorized

Digital Illustration Tutorials That Will Take Your Skills To the Next Level

Web Design LedgerSeptember 21, 2018

Featured Resources Tips Tutorials Web Design

4 Pings & Trackbacks

72 Comments

Marco January 29, 2009 at 5:52 AM Reply

Nice collection of techniques! You might like my iPhone Unlock Screen too (uses jQuery also):
http://demo.marcofolio.net/iphone_unlock/

Thanks for sharing!
Sean Ansari January 29, 2009 at 6:25 AM Reply

13 well shortlisted resources ….bookmarked it for future reference ….thanks for sharing
Eduardo Sasso January 29, 2009 at 9:46 AM Reply

Great post, nice links. I’m huge fan of jQuery because it’s lightweight and very powerful.
Frank Stallone January 29, 2009 at 11:04 AM Reply

Amazing, I have seen all of these before and loved them; now I can use this page as reference, thanks!
Saurabh SHah January 29, 2009 at 11:37 AM Reply

Great links … thnx for posting….
Tobi January 29, 2009 at 11:51 AM Reply

THX 4 this great article!
John Hok January 29, 2009 at 12:45 PM Reply

Thanks for these links, trying to gather up ideas on how I want to animate the new menu on one of my upcoming projects and I’ve been trying to evaluate what JS package would be most suitable.
sky January 29, 2009 at 1:01 PM Reply

wow..it’s so cool man..nice posting
morozgrafix January 29, 2009 at 2:25 PM Reply

here is another great animation technique called jParallax: http://webdev.stephband.info/parallax.html
Tony Oravet January 29, 2009 at 2:37 PM Reply

Thanks for the links and the ideas! I am just now getting into jQuery and this is a great post!
Jackson Beale January 29, 2009 at 2:56 PM Reply

Useful article. Thank to morozgrafix for submitting the link to jParralax.

Anyone keen to share more jQuery knowledge, follow @PunkLogic on twitter.
Jay Kerr January 29, 2009 at 4:32 PM Reply

Great article. Just when I think I’ve seen all of these jQuery tutorials there is another great example in the mix. Now I have to figure out which one to use in my next design project.

Thanks!
Recep Hilmi Tufan January 29, 2009 at 4:56 PM Reply

Can we use them in Blogger?
Paul January 30, 2009 at 7:50 PM Reply

I think we will be seeing a lot more of jQuery animation in 2009.

Only today I added a feature that when you clicked on an input, the size increased to be able to type more characters. It increased using the animate function; So simple and easy, and yet added a really nice effect.
mim January 31, 2009 at 5:11 PM Reply

Great article, ty 😉
Danilo February 2, 2009 at 12:07 PM Reply

Great article ! Cool ! Thank´s jQuery !!!
Cam February 2, 2009 at 5:29 PM Reply

NICE! been looking for a good jquery drop down tut
Designer February 3, 2009 at 12:03 PM Reply

amazing, absolutely amazing !!!!!!!
José February 15, 2009 at 8:42 PM Reply

WOW!

great page.

thank you to share it, jquery amazing.
Matt February 19, 2009 at 12:52 AM Reply

Great!

Check out “100 Best JavaScript Resources”

http://www.spoonfeddesign.com/100-best-javascript-resources
Harsha M V February 23, 2009 at 6:07 AM Reply

I was think which Js framework to learn.. this has convinced me…
Harsha M V February 23, 2009 at 6:11 AM Reply

Awesome Round up
Web Designer April 29, 2009 at 12:58 AM Reply

Super coo!! thanks to share all these jQuery animation techniques! Save our life!
Webagentur June 4, 2009 at 4:44 AM Reply

Thank you … this has me very helped.
jo June 19, 2009 at 4:30 AM Reply

how do u get animations for my web site
Alaa Al-Hussein July 16, 2009 at 9:38 AM Reply

Nice animations and nice collection.

I just want to add something:
– animated window scroll in jQuery
URL: http://blog.freelancer-id.com/index.php/2009/03/26/scroll-window-smoothly-in-jquery

Thanks
unigrowth July 29, 2009 at 12:11 PM Reply

very good effects i will surely use them for website development in gurgaon.
lien August 4, 2009 at 6:28 PM Reply

very technical stuff here
Rob August 5, 2009 at 8:11 AM Reply

Excellent list resource. Particularly liked the mootools inspired menu 🙂
Personal finance blog August 6, 2009 at 10:03 PM Reply

[…] are 11 excellent methos for creating tooltips using various solutions such as jQuery, MooTools, and CSS […]
farooque August 20, 2009 at 6:33 AM Reply

very excellent method for creating tool tips
Jbeyta August 20, 2009 at 5:09 PM Reply

You can never use too many drop down menus. Well, maybe there is a point… These are great. Thanks.

Gotta say, though, the big effing ad at the bottom of the page is annoying. Laptop screens are small.
Baruna August 26, 2009 at 4:57 AM Reply

thanks for your tutorial…
Selva Comments September 3, 2009 at 12:32 AM Reply

Hi thanks!!!

this collection really helped on my site
admire September 15, 2009 at 10:11 AM Reply

this i so cool , i am loving jquery , its cool , i am going to use it in all the project that i am going to
Web Design Singapore September 19, 2009 at 7:45 AM Reply

Excellent! Appreciate this!
Jaspal Singh September 19, 2009 at 11:40 PM Reply

Excellent list of jquery resources, Thanks for sharing.
Phillip Senn December 22, 2009 at 10:21 AM Reply

An iPhone unlock in jQuery!
Brilliant!
Does anyone have the smooth scrolling that the iPhone has as you drag the mouse around the screen?
Phil February 17, 2010 at 11:17 AM Reply

Thanks for collecting jquery tutorial. You surely make easier my searching about utilizing jquery in my blog.
reza March 16, 2010 at 5:33 AM Reply

really great collection !! bookmarked it, anyone have jquery-ui collection??
cuaryos March 27, 2010 at 10:21 AM Reply

jQuery, very awesome script, but really hard applied to my blog.
Motyar April 24, 2010 at 10:47 AM Reply

Great collection!!
You must also look at http://motyar.blogspot.com/search/label/Animation
Sgt Seixas June 1, 2010 at 9:45 AM Reply

what can i say… u are “THE MAN!!!”
Vectorbunker June 3, 2010 at 11:44 PM Reply

Nice, Like it
Reyven June 6, 2010 at 11:29 PM Reply

Cool stuffs. Looking forward to use it on some of my works. Cheers.
Ganesh June 10, 2010 at 12:56 PM Reply

Useful to us…. Thank
Rezoner June 15, 2010 at 8:50 PM Reply

If you look for fancy animated – javascript powered elements, maybe you gonna like my jQuery effects plugin.

http://rezoner.net/labs/jeffects/

It’s not free – but It’s cheap as pack of cigarettes.
Christian July 14, 2010 at 2:44 AM Reply

Take a look on jQuery Bubble Engine Plugin:
http://www.soyos.net/bubble-engine-plugin-for-jquery.html

DEMO:
http://www.soyos.net/tl_files/demos/bubbles/
Dario Grandich July 14, 2010 at 2:15 PM Reply

Great stuff. Already found some uses!
Ken July 21, 2010 at 8:23 PM Reply

Excellent list of jquery resources, Thanks for sharing.
Data Entry July 23, 2010 at 1:31 AM Reply

I 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
1. Alan Green November 10, 2010 at 8:04 PM Reply
  
  I 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.
  1. Tony September 14, 2011 at 3:35 PM Reply
    
    I guess he never really knew how to use Flash..?
    1. Pat November 1, 2011 at 10:56 PM Reply
      
      Depends 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.
  2. Elliot November 7, 2011 at 2:26 AM Reply
    
    What 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.
2. Ron October 25, 2011 at 10:32 PM Reply
  
  It’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.
  1. Mark M. January 24, 2012 at 4:55 PM Reply
    
    YES! 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, 2010 at 9:41 PM Reply

How 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.
1. Henry August 9, 2010 at 12:31 AM Reply
  
  In the upper right hand corner there is a subscribe link.
Layla the Gamer Girl August 27, 2010 at 1:33 PM Reply

Unbelievable, that’s just what I was searching for! You just spared me alot of digging around
Thomas Hunter September 4, 2010 at 8:36 PM Reply

Here’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, 2010 at 3:47 AM Reply

Unbelievable, that’s just what I,m Searching only jQuery And this site have Unbelivable jquery animation scripts
Web Design Hippo September 23, 2010 at 10:53 AM Reply

awesome 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, 2010 at 2:46 AM Reply

Very Nice! Thx!
Naoshad Nayeem October 7, 2010 at 7:31 AM Reply

Very useful. Thanks a lot to the author! 🙂
tuba June 13, 2011 at 10:29 AM Reply

pretty nice tutorial, specially the first one- animation. thank you
Michelle July 25, 2011 at 1:42 AM Reply

great JQUERY animations, looking forward to study them all for my internship site.
Moksha November 26, 2011 at 12:08 AM Reply

nice collection thanks for sharing
Joe@Michigan Web Design January 25, 2012 at 11:25 AM Reply

Never 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 at 3:51 AM Reply

“Build An Incredible Login Form With jQuery” very nice. thanks for archive..
mohsen March 26, 2012 at 4:03 PM Reply

Very Nice! Thx!
prasad December 8, 2013 at 12:42 PM Reply

Very excellent tutorial, Eager to learn more

13 Excellent jQuery Animation Techniques

Related Articles

4 Pings & Trackbacks

72 Comments

Leave a Reply Cancel reply