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
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
Related Posts
Here's some other articles that you will definitely find useful.
14 Helpful Cheat Sheets for Front-end Web Development
12 Useful jQuery Plugins for Working with Tables
12 Excellent jQuery Plugins for Enhancing Forms
14 jQuery Plugins for Enhanced Content Viewing
10 Fresh jQuery Tutorials to Enhance Navigation Menus
Jan 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!
Jan 29, 2009
13 well shortlisted resources ….bookmarked it for future reference ….thanks for sharing
Jan 29, 2009
Great post, nice links. I’m huge fan of jQuery because it’s lightweight and very powerful.
Jan 29, 2009
Amazing, I have seen all of these before and loved them; now I can use this page as reference, thanks!
Jan 29, 2009
Great links … thnx for posting….
Jan 29, 2009
THX 4 this great article!
Jan 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.
Jan 29, 2009
wow..it’s so cool man..nice posting
Jan 29, 2009
here is another great animation technique called jParallax: http://webdev.stephband.info/parallax.html
Jan 29, 2009
Thanks for the links and the ideas! I am just now getting into jQuery and this is a great post!
Jan 29, 2009
Useful article. Thank to morozgrafix for submitting the link to jParralax.
Anyone keen to share more jQuery knowledge, follow @PunkLogic on twitter.
Jan 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!
Jan 29, 2009
Can we use them in Blogger?
Jan 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.
Jan 31, 2009
Great article, ty
Feb 2, 2009
Great article ! Cool ! Thank´s jQuery !!!
Feb 2, 2009
NICE! been looking for a good jquery drop down tut
Feb 3, 2009
amazing, absolutely amazing !!!!!!!
[...] 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 [...]
Feb 15, 2009
WOW!
great page.
thank you to share it, jquery amazing.
Feb 19, 2009
Great!
Check out “100 Best JavaScript Resources”
http://www.spoonfeddesign.com/100-best-javascript-resources
Feb 23, 2009
I was think which Js framework to learn.. this has convinced me…
Feb 23, 2009
Awesome Round up
[...] are 11 excellent methos for creating tooltips using various solutions such as jQuery, MooTools, and CSS [...]
Apr 29, 2009
Super coo!! thanks to share all these jQuery animation techniques! Save our life!
Jun 4, 2009
Thank you … this has me very helped.
Jun 19, 2009
how do u get animations for my web site
Jul 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
Jul 29, 2009
very good effects i will surely use them for website development in gurgaon.
Aug 4, 2009
very technical stuff here
Aug 5, 2009
Excellent list resource. Particularly liked the mootools inspired menu
Aug 6, 2009
[...] are 11 excellent methos for creating tooltips using various solutions such as jQuery, MooTools, and CSS [...]
[...] the solutions listed below are all a breeze to set up, especially since most of them are built on jQuery or [...]
Aug 20, 2009
very excellent method for creating tool tips
Aug 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.
[...] 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. [...]
Aug 26, 2009
thanks for your tutorial…
Sep 3, 2009
Hi thanks!!!
this collection really helped on my site
Sep 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
Sep 19, 2009
Excellent! Appreciate this!
Sep 19, 2009
Excellent list of jquery resources, Thanks for sharing.
Dec 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?