permalink

39

jQuery Animation Tutorialized

Read Later submit to reddit

 

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:

39 Comments

  1. Johnie November 29, 1999 at 7:00 pm Reply

    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.

  3. sammysunset October 29, 2009 at 5:39 pm Reply

    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!

    • Addy November 29, 1999 at 7:00 pm Reply

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

    • Addy October 30, 2009 at 12:27 am Reply

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

  4. sammysunset October 29, 2009 at 5:39 pm Reply

    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!

  10. Johnie October 30, 2009 at 7:33 pm Reply

    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.

  11. Pingback: Animazioni in jQuery! | sastgroup.com

  12. Pingback: Animazioni in jQuery! | sastgroup.com

  13. Pingback: Animazioni in jquery!

  14. Pingback: Animazioni in jquery!

  15. Pingback: jQuery Animation Tutorialized « BrightSpark

  16. Pingback: jQuery Animation Tutorialized « BrightSpark

  19. Pingback: LimeSpace – IT » Wochenrückblick: Frameworks, Animationen, Chats und Forms!

  20. Pingback: LimeSpace – IT » Wochenrückblick: Frameworks, Animationen, Chats und Forms!

  21. Pingback: jQuery Animation Tutorialized « BrightSpark

  23. Pingback: 31 trozos de código de jQuery | Feimstudio - Diseño y programación web

  27. Pingback: 150 best jQuery effects for web designers and developers « Web Design Blog – WebDesignShock

  30. Pingback: 150 best jQuery effects for web designers and developers |

  31. Pingback: WordPress Arena: A Blog for WordPress Developers, Designers and Blogger

Leave a Reply

Required fields are marked *.

*