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.
7 Fresh and Useful jQuery Plugins
10 jQuery Plugins that Will Make your Life Easier
8 jQuery Plugins for Enhancing Typography
9 jQuery Mistakes you Shouldn’t Commit
8 Responsive jQuery Slider Plugins
71 comments
Marco
January 29, 2009Nice collection of techniques! You might like my iPhone Unlock Screen too (uses jQuery also):
http://demo.marcofolio.net/iphone_unlock/
Thanks for sharing!
Sean Ansari
January 29, 200913 well shortlisted resources ….bookmarked it for future reference ….thanks for sharing
Eduardo Sasso
January 29, 2009Great post, nice links. I’m huge fan of jQuery because it’s lightweight and very powerful.
Frank Stallone
January 29, 2009Amazing, I have seen all of these before and loved them; now I can use this page as reference, thanks!
Saurabh SHah
January 29, 2009Great links … thnx for posting….
Tobi
January 29, 2009THX 4 this great article!
John Hok
January 29, 2009Thanks 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.
sky
January 29, 2009wow..it’s so cool man..nice posting
morozgrafix
January 29, 2009here is another great animation technique called jParallax: http://webdev.stephband.info/parallax.html
Tony Oravet
January 29, 2009Thanks for the links and the ideas! I am just now getting into jQuery and this is a great post!
Jackson Beale
January 29, 2009Useful article. Thank to morozgrafix for submitting the link to jParralax.
Anyone keen to share more jQuery knowledge, follow @PunkLogic on twitter.
Jay Kerr
January 29, 2009Great 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!
Recep Hilmi Tufan
January 29, 2009Can we use them in Blogger?
Paul
January 30, 2009I 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.
mim
January 31, 2009Great article, ty
Danilo
February 2, 2009Great article ! Cool ! Thank´s jQuery !!!
Cam
February 2, 2009NICE! been looking for a good jquery drop down tut
Designer
February 3, 2009amazing, absolutely amazing !!!!!!!
José
February 15, 2009WOW!
great page.
thank you to share it, jquery amazing.
Matt
February 19, 2009Great!
Check out “100 Best JavaScript Resources”
http://www.spoonfeddesign.com/100-best-javascript-resources
Harsha M V
February 23, 2009I was think which Js framework to learn.. this has convinced me…
Harsha M V
February 23, 2009Awesome Round up
Web Designer
April 29, 2009Super coo!! thanks to share all these jQuery animation techniques! Save our life!
Webagentur
June 4, 2009Thank you … this has me very helped.
jo
June 19, 2009how do u get animations for my web site
Alaa Al-Hussein
July 16, 2009Nice 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
unigrowth
July 29, 2009very good effects i will surely use them for website development in gurgaon.
lien
August 4, 2009very technical stuff here
Rob
August 5, 2009Excellent list resource. Particularly liked the mootools inspired menu
Personal finance blog
August 6, 2009[...] are 11 excellent methos for creating tooltips using various solutions such as jQuery, MooTools, and CSS [...]
farooque
August 20, 2009very excellent method for creating tool tips
Jbeyta
August 20, 2009You 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.
Baruna
August 26, 2009thanks for your tutorial…
Selva Comments
September 3, 2009Hi thanks!!!
this collection really helped on my site
admire
September 15, 2009this i so cool , i am loving jquery , its cool , i am going to use it in all the project that i am going to
Web Design Singapore
September 19, 2009Excellent! Appreciate this!
Jaspal Singh
September 19, 2009Excellent list of jquery resources, Thanks for sharing.
Phillip Senn
December 22, 2009An iPhone unlock in jQuery!
Brilliant!
Does anyone have the smooth scrolling that the iPhone has as you drag the mouse around the screen?
Phil
February 17, 2010Thanks for collecting jquery tutorial. You surely make easier my searching about utilizing jquery in my blog.
reza
March 16, 2010really great collection !! bookmarked it, anyone have jquery-ui collection??
cuaryos
March 27, 2010jQuery, very awesome script, but really hard applied to my blog.
Motyar
April 24, 2010Great collection!!
You must also look at http://motyar.blogspot.com/search/label/Animation
Sgt Seixas
June 1, 2010what can i say… u are “THE MAN!!!”
Vectorbunker
June 3, 2010Nice, Like it
Reyven
June 6, 2010Cool stuffs. Looking forward to use it on some of my works. Cheers.
Ganesh
June 10, 2010Useful to us…. Thank
Rezoner
June 15, 2010If 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
July 14, 2010Take 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/
Dario Grandich
July 14, 2010Great stuff. Already found some uses!
Ken
July 21, 2010Excellent list of jquery resources, Thanks for sharing.
4 Trackbacks
[...] 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 [...]
[...] 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 [...]
[...] 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. [...]