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
- Subscribe to the ThemeForest RSS Feed for more daily web development tuts and articles.
80
Comments
Jeffrey
Hi, I'm Jeff. I'm the editor of Nettuts+, and the Site Manager of Theme Forest. I spend too much time in front of the computer and find myself telling my fiance', "We'll go in 5 minutes!" far too often. I just can't go out to dinner while I'm still producing FireBug errors...drives me crazy. I love jQuery, PHP, MYSQL, CSS, AJAX - pretty much anything.
- Ask JW: A Plugin to Make Important Announcements
- Working with the New "Envato Marketplace Items" WordPress Plugin
- New Marketplace Features Screencast
Thanks,
Nice and easy tute.
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
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!
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
Keep up the great work, thanks.
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?
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 ?
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
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;
Thanks a lot for this explanation Alin. Very nice
Thanks for helping me along the way. This is proving to be very helpful!
Just working my way through these. Excellent series! Keep up the sterling work!
Thank u thank u thank u……………!!!
Very useful tutorial
it is EC to learn thanks again Jeff
This is why I love programming. Content like this on the web for free. Awesome. Thanks
thank you.
SUPER
AWESOME
DAMN COOL
THNX
Another easy to follow tutorial!
Thankyou.
This is great, thanks so much for doing these! You’ve really demystified jQuery!
wow, great tutorial! thank you
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?
thankyou every so much
Damm!! i could not have learnt jQuery in a better way .. thanks for making it so simple and easy
Thanks for article
Thanks For Article…!!
thanks for share
a good site. Thanks for article and share
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.
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.