13 Excellent jQuery Animation Techniques

By / Jan 29, 2009 / Tutorials
shares

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

Building an Animated Cartoon Robot with jQuery


Animate a hover with jQuery

<br />
Animate a hover with jQuery

How To Create A ‘Mootools Homepage’ Inspired Navigation Effect Using jQuery

How To Create A ‘Mootools Homepage’ Inspired Navigation Effect Using jQuery

CSS Sprites2 – It’s JavaScript Time

CSS Sprites2 - It's JavaScript Time

Build An Incredible Login Form With jQuery

Build An Incredible Login Form With jQuery

Learning jQuery: Revealing Photo Slider

Learning jQuery: Revealing Photo Slider

Learning jQuery: Fading Menu – Replacing Content

Learning jQuery: Fading Menu - Replacing Content

Using jQuery for Background Image Animations

Using jQuery for Background Image Animations

Animated Menus Using jQuery

Animated Menus Using jQuery

Create a Cool Animated Navigation with CSS and jQuery

Create a Cool Animated Navigation with CSS and jQuery

Animated Drop Down Menu with jQuery

Animated Drop Down Menu with jQuery

jQuery Tutorials for Designers

jQuery Tutorials for Designers

How to Load In and Animate Content with jQuery

How to Load In and Animate Content with jQuery

About the Author

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

76 Comments

  1. Marco
    January 29, 2009

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

    Thanks for sharing!

    Reply
  2. Sean Ansari
    January 29, 2009

    13 well shortlisted resources ….bookmarked it for future reference ….thanks for sharing

    Reply
  3. Eduardo Sasso
    January 29, 2009

    Great post, nice links. I’m huge fan of jQuery because it’s lightweight and very powerful.

    Reply
  4. Frank Stallone
    January 29, 2009

    Amazing, I have seen all of these before and loved them; now I can use this page as reference, thanks!

    Reply
  5. Saurabh SHah
    January 29, 2009

    Great links … thnx for posting….

    Reply
  6. Tobi
    January 29, 2009

    THX 4 this great article!

    Reply
  7. John Hok
    January 29, 2009

    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.

    Reply
  8. sky
    January 29, 2009

    wow..it’s so cool man..nice posting

    Reply
  9. morozgrafix
    January 29, 2009

    here is another great animation technique called jParallax: http://webdev.stephband.info/parallax.html

    Reply
  10. Tony Oravet
    January 29, 2009

    Thanks for the links and the ideas! I am just now getting into jQuery and this is a great post!

    Reply
  11. Jackson Beale
    January 29, 2009

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

    Anyone keen to share more jQuery knowledge, follow @PunkLogic on twitter.

    Reply
  12. Jay Kerr
    January 29, 2009

    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!

    Reply
  13. Recep Hilmi Tufan
    January 29, 2009

    Can we use them in Blogger?

    Reply
  14. Paul
    January 30, 2009

    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.

    Reply
  15. mim
    January 31, 2009

    Great article, ty ;)

    Reply
  16. Danilo
    February 2, 2009

    Great article ! Cool ! Thank´s jQuery !!!

    Reply
  17. Cam
    February 2, 2009

    NICE! been looking for a good jquery drop down tut

    Reply
  18. Designer
    February 3, 2009

    amazing, absolutely amazing !!!!!!!

    Reply
  19. 11 Ways to Enhance a User Interface with MooTools | Web Design Ledger
    February 6, 2009

    [...] 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 [...]

    Reply
  20. José
    February 15, 2009

    WOW!

    great page.

    thank you to share it, jquery amazing.

    Reply
  21. Matt
    February 19, 2009

    Great!

    Check out “100 Best JavaScript Resources”

    http://www.spoonfeddesign.com/100-best-javascript-resources

    Reply
  22. Harsha M V
    February 23, 2009

    I was think which Js framework to learn.. this has convinced me…

    Reply
  23. Harsha M V
    February 23, 2009

    Awesome Round up

    Reply
  24. 11 Excellent Solutions for Creating Tooltips | Web Design Ledger
    March 10, 2009

    [...] are 11 excellent methos for creating tooltips using various solutions such as jQuery, MooTools, and CSS [...]

    Reply
  25. Web Designer
    April 29, 2009

    Super coo!! thanks to share all these jQuery animation techniques! Save our life!

    Reply
  26. Webagentur
    June 4, 2009

    Thank you … this has me very helped.

    Reply
  27. jo
    June 19, 2009

    how do u get animations for my web site

    Reply
  28. Alaa Al-Hussein
    July 16, 2009

    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

    Reply
  29. unigrowth
    July 29, 2009

    very good effects i will surely use them for website development in gurgaon.

    Reply
  30. lien
    August 4, 2009

    very technical stuff here

    Reply
  31. Rob
    August 5, 2009

    Excellent list resource. Particularly liked the mootools inspired menu :)

    Reply
  32. Personal finance blog
    August 6, 2009

    [...] are 11 excellent methos for creating tooltips using various solutions such as jQuery, MooTools, and CSS [...]

    Reply
  33. 14 Easy to Implement Drop Down Menu Solutions | Web Design Ledger
    August 19, 2009

    [...] the solutions listed below are all a breeze to set up, especially since most of them are built on jQuery or [...]

    Reply
  34. farooque
    August 20, 2009

    very excellent method for creating tool tips

    Reply
  35. Jbeyta
    August 20, 2009

    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.

    Reply
  36. 13 Super Useful jQuery Content Slider Scripts and Tutorials | Web Design Ledger
    August 24, 2009

    [...] 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. [...]

    Reply
  37. Baruna
    August 26, 2009

    thanks for your tutorial…

    Reply
  38. Selva Comments
    September 3, 2009

    Hi thanks!!!

    this collection really helped on my site

    Reply
  39. admire
    September 15, 2009

    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

    Reply
  40. Web Design Singapore
    September 19, 2009

    Excellent! Appreciate this!

    Reply
  41. Jaspal Singh
    September 19, 2009

    Excellent list of jquery resources, Thanks for sharing.

    Reply
  42. Phillip Senn
    December 22, 2009

    An iPhone unlock in jQuery!
    Brilliant!
    Does anyone have the smooth scrolling that the iPhone has as you drag the mouse around the screen?

    Reply
  43. Phil
    February 17, 2010

    Thanks for collecting jquery tutorial. You surely make easier my searching about utilizing jquery in my blog.

    Reply
  44. reza
    March 16, 2010

    really great collection !! bookmarked it, anyone have jquery-ui collection??

    Reply
  45. cuaryos
    March 27, 2010

    jQuery, very awesome script, but really hard applied to my blog.

    Reply
  46. Motyar
    April 24, 2010

    Great collection!!
    You must also look at http://motyar.blogspot.com/search/label/Animation

    Reply
  47. Sgt Seixas
    June 1, 2010

    what can i say… u are “THE MAN!!!”

    Reply
  48. Vectorbunker
    June 3, 2010

    Nice, Like it

    Reply
  49. Reyven
    June 6, 2010

    Cool stuffs. Looking forward to use it on some of my works. Cheers.

    Reply
  50. Ganesh
    June 10, 2010

    Useful to us…. Thank

    Reply
  51. Rezoner
    June 15, 2010

    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.

    Reply
  52. Christian
    July 14, 2010

    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/

    Reply
  53. Dario Grandich
    July 14, 2010

    Great stuff. Already found some uses!

    Reply
  54. Ken
    July 21, 2010

    Excellent list of jquery resources, Thanks for sharing.

    Reply
  55. Data Entry
    July 23, 2010

    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

    Reply
    • Alan Green
      November 10, 2010

      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.

      Reply
      • Tony
        September 14, 2011

        I guess he never really knew how to use Flash..?

        Reply
        • Pat
          November 1, 2011

          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.

          Reply
      • Elliot
        November 7, 2011

        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.

        Reply
    • Ron
      October 25, 2011

      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.

      Reply
      • Mark M.
        January 24, 2012

        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…

        Reply
  56. Claudio Catania
    August 5, 2010

    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.

    Reply
    • Henry
      August 9, 2010

      In the upper right hand corner there is a subscribe link.

      Reply
  57. Layla the Gamer Girl
    August 27, 2010

    Unbelievable, that’s just what I was searching for! You just spared me alot of digging around

    Reply
  58. Thomas Hunter
    September 4, 2010

    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/

    Reply
  59. Tanay
    September 15, 2010

    Unbelievable, that’s just what I,m Searching only jQuery And this site have Unbelivable jquery animation scripts

    Reply
  60. Web Design Hippo
    September 23, 2010

    awesome animations here. It really goes to show you that jQuery is slowly going to be a replacement for flash applications online!

    Reply
  61. Web Dizajn
    October 4, 2010

    Very Nice! Thx!

    Reply
  62. Naoshad Nayeem
    October 7, 2010

    Very useful. Thanks a lot to the author! :-)

    Reply
  63. tuba
    June 13, 2011

    pretty nice tutorial, specially the first one- animation. thank you

    Reply
  64. Michelle
    July 25, 2011

    great JQUERY animations, looking forward to study them all for my internship site.

    Reply
  65. Moksha
    November 26, 2011

    nice collection thanks for sharing

    Reply
  66. Joe@Michigan Web Design
    January 25, 2012

    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!

    Reply
  67. Ahmet ŞEN
    March 23, 2012

    “Build An Incredible Login Form With jQuery” very nice. thanks for archive..

    Reply
  68. mohsen
    March 26, 2012

    Very Nice! Thx!

    Reply
  69. prasad
    December 8, 2013

    Very excellent tutorial, Eager to learn more

    Reply

Leave a Reply