13 Excellent jQuery Animation Techniques

By / Jan 29, 2009 / Tutorials

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

  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.

  • http://www.marcofolio.net/ Marco

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

    Thanks for sharing!

  • http://www.vividwebgraphics.com Sean Ansari

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

  • http://eduardosasso.com/ Eduardo Sasso

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

  • http://www.iamfrankstallone.com Frank Stallone

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

  • http://twitter.com/saurabhshah Saurabh SHah

    Great links … thnx for posting….

  • http://twitter.com/hdm_tobi Tobi

    THX 4 this great article!

  • http://johnhok.com John Hok

    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.

  • http://www.firvan.com sky

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

  • http://www.shoethatfits.com morozgrafix

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

  • http://www.evenparsolutions.com Tony Oravet

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

  • http://www.punklogic.com Jackson Beale

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

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

  • http://www.bombippy.com Jay Kerr

    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!

  • http://recephilmitufan.com Recep Hilmi Tufan

    Can we use them in Blogger?

  • http://prandall.com Paul

    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.

  • http://[email protected] mim

    Great article, ty 😉

  • http://www.dtgdesign.art.br Danilo

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

  • http://www.blog.mookiedesign.com Cam

    NICE! been looking for a good jquery drop down tut

  • http://www.RedesignYourBiz.com Designer

    amazing, absolutely amazing !!!!!!!

  • Pingback: 11 Ways to Enhance a User Interface with MooTools | Web Design Ledger()

  • José

    WOW!

    great page.

    thank you to share it, jquery amazing.

  • http://www.spoonfeddesign.com/ Matt

    Great!

    Check out “100 Best JavaScript Resources”

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

  • http://harshamv.com/ Harsha M V

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

  • http://harshamv.com/ Harsha M V

    Awesome Round up

  • Pingback: 11 Excellent Solutions for Creating Tooltips | Web Design Ledger()

  • http://notionage.com/ Web Designer

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

  • http://typo3-agentur.typo3-fanworld.de Webagentur

    Thank you … this has me very helped.

  • http://shakes jo

    how do u get animations for my web site

  • http://www.freelancer-id.com Alaa Al-Hussein

    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

  • http://www.unigrowth.com unigrowth

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

  • http://webdesignteesside.yolasite.com lien

    very technical stuff here

  • http://www.web-design-talk.co.uk Rob

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

  • http://www.facefinance.com Personal finance blog

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

  • Pingback: 14 Easy to Implement Drop Down Menu Solutions | Web Design Ledger()

  • farooque

    very excellent method for creating tool tips

  • http://www.tymeandspace.com Jbeyta

    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.

  • Pingback: 13 Super Useful jQuery Content Slider Scripts and Tutorials | Web Design Ledger()

  • Baruna

    thanks for your tutorial…

  • http://www.webpagecollection.com Selva Comments

    Hi thanks!!!

    this collection really helped on my site

  • admire

    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

  • http://www.xaby.com Web Design Singapore

    Excellent! Appreciate this!

  • http://www.jsxtech.com Jaspal Singh

    Excellent list of jquery resources, Thanks for sharing.

  • http://www.PhillipSenn.com Phillip Senn

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

  • http://wallpaperesi.com Phil

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

  • reza

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

  • http://cuaryos.blogspot.com cuaryos

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

  • http://motyar.blogspot.com/ Motyar

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

  • Sgt Seixas

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

  • http://www.vectorbunker.com Vectorbunker

    Nice, Like it

  • http://www.worldwideown.com Reyven

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

  • Ganesh

    Useful to us…. Thank

  • http://rezoner.net Rezoner

    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
  • http://www.snapshotmedia.co.uk Dario Grandich

    Great stuff. Already found some uses!

  • http://penisenhancement.delstrange.com/ Ken

    Excellent list of jquery resources, Thanks for sharing.

  • http://dataentryjobssite.com Data Entry

    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

    • Alan Green

      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.

      • Tony

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

        • Pat

          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.

      • Elliot

        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.

    • Ron

      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.

      • Mark M.

        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…

  • http://www.oreillydesign.livejournal.com/611.html Claudio Catania

    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.

    • http://henryjones.us Henry

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

  • http://www.nextvideogames.net Layla the Gamer Girl

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

  • Thomas Hunter

    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

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

  • http://www.swimminghippo.co.uk Web Design Hippo

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

  • http://www.design21h.com Web Dizajn

    Very Nice! Thx!

  • http://www.smartwebsource.com Naoshad Nayeem

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

  • http://psdtomagento.net tuba

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

  • Michelle

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

  • http://mokshasolutions.com Moksha

    nice collection thanks for sharing

  • http://www.ajacwebdesign.com Joe@Michigan Web Design

    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!

  • http://www.ahmetsen.net Ahmet ŞEN

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

  • http://www.ellab.ir mohsen

    Very Nice! Thx!

  • http://www.byzerotechnologies.com prasad

    Very excellent tutorial, Eager to learn more