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. 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
  2. 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
  3. Dario Grandich
    July 14, 2010

    Great stuff. Already found some uses!

    Reply
  4. Ken
    July 21, 2010

    Excellent list of jquery resources, Thanks for sharing.

    Reply
  5. 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
  6. 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
  7. 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
  8. 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
  9. Tanay
    September 15, 2010

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

    Reply
  10. 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
  11. Web Dizajn
    October 4, 2010

    Very Nice! Thx!

    Reply
  12. Naoshad Nayeem
    October 7, 2010

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

    Reply
  13. tuba
    June 13, 2011

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

    Reply
  14. Michelle
    July 25, 2011

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

    Reply
  15. Moksha
    November 26, 2011

    nice collection thanks for sharing

    Reply
  16. 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
  17. Ahmet ŞEN
    March 23, 2012

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

    Reply
  18. mohsen
    March 26, 2012

    Very Nice! Thx!

    Reply
  19. prasad
    December 8, 2013

    Very excellent tutorial, Eager to learn more

    Reply

Leave a Reply