This week I’m going to show you to make the best use of jQuery’s amazing animation features using just a few lines of code for each our examples. Did you know that you can use jQuery’s animation functions to create your very own progress-bar in less than 3 lines? or that you could use it to make your very own accordian in under 9 lines? Well, today I’m going to go through some examples of how to do these and a whole lot more.
First let’s start with some basics. What is the jQuery animate() feature?. The animate() feature allows you to create custom animations using a few lines of code – it’s key aspect is the object containing all of the style properties to be animated and to what end. Essentially this means that it allows you to specify what you want to animate and where you eventually want that item to appear. For example, if I have a div called "red" on what side of the screen, I can specify the end of the screen as an end-point and have it animate towards that point. I’m able to also say what property of the item I would like animated -eg. in the above case if I wanted to move the item towards the end of the screen..I would alter the marginLeft property from where it is right now to something larger. This is done as follows:


WOW! I was looking for a compact slideshow and ran across your site which really opened my eyes to the possibilities of JQuery. Great work. Thanks.
You're very welcome. I'm happy to see that my articles are helping other coders see how useful jQuery can be!
You're very welcome. I'm happy to see that my articles are helping other coders see how useful jQuery can be!
Thanks for good tips.
My pleasure!. Thanks for reading.
My pleasure!. Thanks for reading.
Again, great article, Addy!
For some reason, your code snippets are showing line breaks with an extra graphic (green, swooshy arrow). It might confuse people.
Just my two cents! Thanks for another helpful article!
Thanks! I looked into it and its because the lines are wrapping around due to my layout's width. I'll see if I can hack together a patch for the highlighter.
Appreciate the heads up
Thanks! I looked into it and its because the lines are wrapping around due to my layout's width. I'll see if I can hack together a patch for the highlighter.
Appreciate the heads up
Again, great article, Addy!
For some reason, your code snippets are showing line breaks with an extra graphic (green, swooshy arrow). It might confuse people.
Just my two cents! Thanks for another helpful article!
I found your article through dzone – nice. I'll give you an "up" vote on there, but wanted to comment here as well. Great Job…
I found your article through dzone – nice. I'll give you an "up" vote on there, but wanted to comment here as well. Great Job…
Thanks! I'm glad you enjoyed the article.
Thanks! I'm glad you enjoyed the article.
Thanks for good tips.
WOW! I was looking for a compact slideshow and ran across your site which really opened my eyes to the possibilities of JQuery. Great work. Thanks.
Pingback: Animazioni in jQuery! | sastgroup.com
Pingback: Animazioni in jQuery! | sastgroup.com
Pingback: Animazioni in jquery!
Pingback: Animazioni in jquery!
Pingback: jQuery Animation Tutorialized « BrightSpark
Pingback: jQuery Animation Tutorialized « BrightSpark
Very good Stuff. Thanks a lot
Very good Stuff. Thanks a lot
Pingback: LimeSpace – IT » Wochenrückblick: Frameworks, Animationen, Chats und Forms!
Pingback: LimeSpace – IT » Wochenrückblick: Frameworks, Animationen, Chats und Forms!
Pingback: jQuery Animation Tutorialized « BrightSpark
Great tutorial. Thanks!
Pingback: 31 trozos de código de jQuery | Feimstudio - Diseño y programación web
nice. very handy. Thanks
Nice article.
Thanks;)
Awesome guide. Already bookmarked.
I\’m glad it came in useful
Pingback: 150 best jQuery effects for web designers and developers « Web Design Blog – WebDesignShock
good
I did some jQuery animations to avoid Flash.
Check out the different slides in the header. http://www.trussystem.nl (Dutch)
Pingback: 150 best jQuery effects for web designers and developers |
Pingback: WordPress Arena: A Blog for WordPress Developers, Designers and Blogger
great article. it helped me in my current project.
Thanks