Click here to join 1000 satisfied readers Get in touch Click here to join 1000 satisfied readers Portfolio Read my blog Home

Here you can find my latest tutorials, blog posts or you can hire me to help your business grow.

Enjoy your visit.

Delicous saves: 0
  Buzz it

jQuery Animation Tutorialized

by admin | October 29, 2009 | In Web Development

 

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:

Tagged as: , , , , , , , , , , , , , , , , , , , , , ,

This website uses IntenseDebate comments, but they are not currently loaded because either your browser doesn't support JavaScript, or they didn't load fast enough.

27 Responses »

  1. sammysunset on October 29, 2009 at 5:39 pm:

    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!

  2. sammysunset on October 29, 2009 at 5:39 pm:

    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!

  3. theSiteMan on October 30, 2009 at 12:14 am:

    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…

  4. theSiteMan on October 30, 2009 at 12:14 am:

    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…

  5. Addy on October 30, 2009 at 12:27 am:

    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 :)

  6. Addy on October 30, 2009 at 12:27 am:

    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 :)

  7. Addy on October 30, 2009 at 12:27 am:

    Thanks! I'm glad you enjoyed the article.

  8. Addy on October 30, 2009 at 12:27 am:

    Thanks! I'm glad you enjoyed the article.

  9. Hongpak on October 30, 2009 at 1:30 am:

    Thanks for good tips.

  10. Hongpak on October 30, 2009 at 1:30 am:

    Thanks for good tips.

  11. Johnie on October 30, 2009 at 7:33 pm:

    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.

  12. Johnie on October 30, 2009 at 7:33 pm:

    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.

  13. Addy on October 30, 2009 at 7:35 pm:

    My pleasure!. Thanks for reading.

  14. Addy on October 30, 2009 at 7:35 pm:

    My pleasure!. Thanks for reading.

  15. Addy on October 30, 2009 at 7:36 pm:

    You're very welcome. I'm happy to see that my articles are helping other coders see how useful jQuery can be!

  16. Addy on October 30, 2009 at 7:36 pm:

    You're very welcome. I'm happy to see that my articles are helping other coders see how useful jQuery can be!

  17. Animazioni in jQuery! | sastgroup.com on November 12, 2009 at 5:01 am:

    [...] al tutorial + Demo: http://addyosmani.com/blog/jquery-animation-tutorialized/ [...]

  18. Animazioni in jQuery! | sastgroup.com on November 12, 2009 at 5:01 am:

    [...] al tutorial + Demo: http://addyosmani.com/blog/jquery-animation-tutorialized/ [...]

  19. Animazioni in jquery! on November 13, 2009 at 8:11 pm:

    [...] Link al tutorial + Demo: http://addyosmani.com/blog/jquery-animation-tutorialized/ [...]

  20. Animazioni in jquery! on November 13, 2009 at 8:11 pm:

    [...] Link al tutorial + Demo: http://addyosmani.com/blog/jquery-animation-tutorialized/ [...]

  21. jQuery Animation Tutorialized « BrightSpark on December 6, 2009 at 1:07 pm:

    [...] jQuery Animation Tutorialized Filed under: Articles — admin @ 12:07 pm [...]

  22. jQuery Animation Tutorialized « BrightSpark on December 6, 2009 at 1:07 pm:

    [...] jQuery Animation Tutorialized Filed under: Articles — admin @ 12:07 pm [...]

  23. Ssanthosh on December 9, 2009 at 11:55 am:

    Very good Stuff. Thanks a lot

  24. Ssanthosh on December 9, 2009 at 11:55 am:

    Very good Stuff. Thanks a lot

  25. LimeSpace – IT » Wochenrückblick: Frameworks, Animationen, Chats und Forms! on January 5, 2010 at 1:26 am:

    [...] Für Liebhaber cooler Effekte auf der Webseite gibt es ein neues und extrem ausführliches Tutorial zu den Möglichkeiten der Animation mit JQuery, absolut lesenswert. [JQuery Animate] [...]

  26. LimeSpace – IT » Wochenrückblick: Frameworks, Animationen, Chats und Forms! on January 5, 2010 at 1:26 am:

    [...] Für Liebhaber cooler Effekte auf der Webseite gibt es ein neues und extrem ausführliches Tutorial zu den Möglichkeiten der Animation mit JQuery, absolut lesenswert. [JQuery Animate] [...]

  27. jQuery Animation Tutorialized « BrightSpark on February 19, 2010 at 3:42 pm:

    [...] tweetmeme_url = "http://addyosmani.com/blog/jquery-animation-tutorialized/"; tweetmeme_style = "compact"; admin Read Post [...]

Leave a Reply