jQuery for Absolute Beginners: Day 3

Today, we’ll take a look at the animate method, and a few “gotchas” that come along with it. You’ll learn how to shift any element across the screen.



Day 3: The Animate Method

Download the Source Code



80

Comments
  • Reza says:

    Thanks,

    Nice and easy tute.

  • Jordan Garn says:

    Seriously the best JQuery Tutorials I have found online, excellent Job man!

    One question i have so far that i’m sure you will answer in future Tutorials is let’s say i’ve moved this box to the right on the first click, but now I want to move it back to the starting position (using similar animations) on the second click (after it’s been moved) How would you do that?

    Thanks

  • John says:

    Like us Brits in general I am afew months out of date. we also understate most things so if a say very good you can exponentiate that. Keep it up!

  • John says:

    I need my visitor to print a file *.rtf that is located on my Website root directory via the windows API. Printing the page as does print() does not give good quality. All methods I have tried so far seem only to print the web page. Help

  • Codie says:

    Keep up the great work, thanks.

  • alin says:

    i have a question, so if someone has the time to tell me i would be grateful
    lets take this:

    $(‘#box’).click(function(){
    $(this).animate({
    “left” : “300px”,
    “width” : “50px”
    });

    i know that when i send some variable to a function or a method i use :

    testFunction(‘firstvar’,’secondVar’);

    but here it is used :

    $(this).animate({“left” : “300px”,”width” : “50px” })

    {“left” : “300px”,”width” : “50px” } it’s sending an array ? or what?

  • alin says:

    those tutorials are very nice, in 1 day you can learn the basics of jquery, but i have another question:

    http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm

    are there some methods in jquery that can compensate for this drawing ?

  • redsonic says:

    Hi, thank you very much for this very nice video, but I have a beginner question :

    Why when we click a second time on the red square, we did not have the same effect ? I mean we have the effect only once :|

    Best regards

  • alin says:

    redsonic the method animate takes the current css properties and modifies them step by step until they are equal to the ones that you have provided them;
    for example :

    you initial have : left: 0px, and then in the animate method you have 300px;
    if you also give the second option 1000 ( time in which to execute this), it will make something like this:

    300px-0px = 300px; so he will have to move 300 px to the left in the course of 1000 milliseconds;
    so he will do something like this: every 10 milliseconds he will take old left and add 3px to it until the current left propriety = 300 px;

    but if you click it again you have initial : left : 300px; and you want ti animate it until you have 300px; so it won’t have to change anything;

  • redsonic says:

    Thanks a lot for this explanation Alin. Very nice :)

  • charlie says:

    Thanks for helping me along the way. This is proving to be very helpful!

  • Clinton says:

    Just working my way through these. Excellent series! Keep up the sterling work!

  • Muditha says:

    Thank u thank u thank u……………!!!

    Very useful tutorial

    it is EC to learn thanks again Jeff

  • RobertT says:

    This is why I love programming. Content like this on the web for free. Awesome. Thanks

  • myutmost says:

    thank you.

  • Imran says:

    SUPER

    AWESOME

    DAMN COOL

    THNX

  • vype says:

    Another easy to follow tutorial!

    Thankyou.

  • Adam says:

    This is great, thanks so much for doing these! You’ve really demystified jQuery!

  • robeno says:

    wow, great tutorial! thank you

  • mat says:

    Enjoyed it a lot,
    Thanks.

  • Hey Jeffrey, nice tutorial but I got a question.

    When using the width property the box width shortens from right to left, any possibility to change that to left to right?

  • ferit says:

    thankyou every so much

  • Sahana says:

    Damm!! i could not have learnt jQuery in a better way .. thanks for making it so simple and easy

  • kalibrasyon says:

    Thanks for article

  • kalibrasyon says:

    Thanks For Article…!!

  • perde says:

    a good site. Thanks for article and share

  • perde says:

    The left vs. right thing is a bit confusing for me; it’s more of a “I should remember this…” sort of things.

    I don’t want to say the rule is opposites; cause it’s probably not. But I sort of see how it works.

  • tül perde says:

    I have a question regarding the animate function:

    How does one make the same box move again after the first click?

  • I just want to say that after watching a couple of your videos, I’m finally getting a good grasp how exactly to use jQuery.

    I just need to find a list of commands that I can use in jQuery and I’ll be good to go now.

    Thanks a lot.