March 28, 2024

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

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

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

4 Pings & Trackbacks

  1. Pingback: 11 Ways to Enhance a User Interface with MooTools | Web Design Ledger

  2. Pingback: 11 Excellent Solutions for Creating Tooltips | Web Design Ledger

  3. Pingback: 14 Easy to Implement Drop Down Menu Solutions | Web Design Ledger

  4. Pingback: 13 Super Useful jQuery Content Slider Scripts and Tutorials | Web Design Ledger

72 Comments

  1. John Hok 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.

  2. Jay Kerr 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!

  3. Paul 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.

  4. Jbeyta 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.

    1. Alan Green 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. Pat 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.

      1. Elliot 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 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. 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…

Leave a Reply

Your email address will not be published. Required fields are marked *