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.
Barttos
November 24th, 2008
Ohh, thank you, i just learning jQuery, very useful!
umit
November 24th, 2008
Thank you.Good tutorial.
Z3R0
November 24th, 2008
Thank you so much, this is GODLIKE!
Keep up your great work !
Colleen
November 24th, 2008
Your tutorials don’t start with the document.ready thingie that I see in the JQuery documentation. Is what you do a new shorthand or what?
Travis
November 24th, 2008
Another great tutorial.
Jeffrey
November 24th, 2008
@Colleen - I speak of this in the first video. They’re identical. My version is just shorthand.
Jon
November 24th, 2008
Thanks again!
Kyle
November 24th, 2008
Great Stuff, Keep it comin!
Ariyo
November 24th, 2008
Thanx Jeff. I was wondering if we could possibly subscribe to these videos via iTunes podcast.That would be Awesome.
mywowo
November 25th, 2008
It’s nice,and Pushing to http://mywowo.com/srcShow.asp?Src_ID=3752
chris simpson
November 25th, 2008
another great tutorial Jeffrey.
i rate this series.
Kaly
November 25th, 2008
Great man another great tuts.
Thanks very much!
jacqui fleming
November 26th, 2008
Excellent series so far. Please keep it coming.
Jacqui.
Marko
November 26th, 2008
Is it possible to do the scripting in an separate js file and include it inside html and how would that look like then?
Jeffrey
November 26th, 2008
@Marko - Yes. You should do that.
I’ve been keeping it on the same page for the sake of simplicity. In today’s tutorial (Day 4), I’ll show you how.
Ben
November 28th, 2008
Wow I am loving this! Thank you Jeffrey!
Melvin Walls
November 30th, 2008
Thanks Jeffrey! Helped a lot with my jquery learning.
I submitted this to digg
Shaun
December 6th, 2008
Hi Jeffrey,
Firstly i’d just like to say thanks for doing these, i’m finding them very helpful. Just to clear something up for me, you’re saying “animate-left-300px” but the box moves to the right?
Is this just because it is adding a margin-left property? So if you actually want the box to move to the left you would need to animate-right-300px?
Jeffrey
December 6th, 2008
Shaun - Exactly. When I wrote - “animate-left-300px”, that means, take the element and move it from left to right 300px.
If you want the element to go to the left instead, you would push it from the right.
.animate {
“right” : 300px
}
Hope this helps!
Steve
December 10th, 2008
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.
Maybe I can read it to myself as:
Animate from the left 300px or animate from the right 300px - FROM being the key word.
If I do it that way it makes more sense to me. Is that a good rule of thumb to keep in mind?
michael
December 14th, 2008
Nice to see someone doing these, but to clarify, what you called chaining is NOT chaining. Chaining would be:
$(this).animate({ ‘left’: ‘300px’ }, 4000).animate({ ‘width’: ‘50px’ }, 4000);
The idea behind chaining is that you are able to pass the object from method to method, linked like a chain using dot notation, because each method returns the object. There is no reason to do:
$(this).animate({ ‘left’: ‘300px’ }, 4000);
$(this).animate({ ‘width’: ‘50px’ }, 4000);
That defeats the purpose and power of jQuery’s chaining abilities.
perde
December 15th, 2008
Thanks for the video series. It’s great!
Aman
December 21st, 2008
I ve just started to got through your tutorials! Great job! Its easy to understand and to follow!
In this tutorial, when you change the width to 50px, it gets smaller from right to left. is there a way that i would get smaller from left to right?
Shaymol Bapary
January 8th, 2009
Thanks for this video and your hard work. Keep it up !
Khanh
January 15th, 2009
i love it!!!!
Shareef
January 22nd, 2009
Hi Jeffrey,
its awesome,it would be very much helpful for me.apart prom these videos do we need to learn jquery more to servive
Hassan
January 30th, 2009
Hi Jeffrey,
Some of your videos don’t work !
By the way, nice Job
winai
February 1st, 2009
it’s very useful. could you plase improve the quality of sound.
PJ
February 5th, 2009
I’m trying to follow Day 3’s tutorial. When I try to add position:relative to my style, position doesn’t even show up in intellisense. Since it doesn’t show up, it’s considered invalid. So I can’t follow the demo further.
When I open .css files, it works fine. There are other css items missing from my intellisense as well.
Otherwise Day 1 & 2 worked fine, fadeing in/out etc.
Any ideas? These tutorials are great!
Thanks, PJ
PJ
February 5th, 2009
…It dawned on me I didn’t give and config info:
VS 2008 v9 SP1
.net 3.5 SP1
jquery-1.3.1.min.js
Andy
February 6th, 2009
Thanks alot!
Very useful tutorial, i love jQuery
Keep up the great work!
Alex
February 12th, 2009
What a nice tutorial,, very simply and very good
Dan
February 22nd, 2009
I’m having problems viewing the videos - they seem very slow with most stopping half way through (my throughput is aok) - an you have a chat with blip.tv?
sridhar
February 23rd, 2009
good work..
Fulvio
February 25th, 2009
Thanks so much for the tut!
Do you think it would be possible to duplicate the effect of the sliding and hiding thumbnails of the top stories seen on http://www.espn.com/mlb?
Thanks a lot!
John Dangerous
March 1st, 2009
I wish tweening in Action Script was this easy lol.
You know what would be a really cool tutorial is if someone would demonstrate how to build what would look like a flash ad all in Jquery.
MCJenkins
March 5th, 2009
Nice tutorials, I’m loving them. Appreciate you taking the time to make it easy for us.
Pradeep
March 11th, 2009
Very useful videos. I am a hardcore java programmer trying to get into javascript/css world and this series is doing wonders to me. Keep up the good work, I will definitely give reference to you in my website
Jerry
March 13th, 2009
I’m stuck. Day 1 and 2 worked fine. but the Day 3 code won’t work at all. Did I miss a comma or something somewhere?
#box
{
background: red;
width: 300px;
height: 300px;
position: relative;
}
$function() {
$(’#box’).click(function() {
$(this).animate({
“left” : “300px”
});
});
});
Confused in Grand Rapids
Piter
March 23rd, 2009
COOL. THIS AMAZINE!!!
Afsar
March 24th, 2009
thanx again
ben
March 25th, 2009
top job !
Rawan
March 25th, 2009
Great Tutorial!!! Thanx
campy
April 2nd, 2009
hiiiii
great job!!!!!!!!
we have learnt jquery with fun!!!!!!!!!!
tess Losen
April 7th, 2009
Great tutorial. Thanks.
Ronnie Overby
April 8th, 2009
.animate wont work in google chrome, for me.
Quintin
April 10th, 2009
As everyone has said, thanks very much for sharing your knowledge with us - these are great tutorials.
I have a question regarding the animate function:
How does one make the same box move again after the first click?
Imagine this: 2 blocks on a page with a text link in the middle of them.
I have managed to make the blocks move when you click the text link, but, after that I would like them to move back to their original position. I just can not seem to get it right.
Any help would be appreciated.
Mickey Hoang
April 12th, 2009
thank a lot!
Justin
April 13th, 2009
Why does it move right when you animate it left?
isotec
April 16th, 2009
Hi!
Thanks for tutorials. These are very great and simple and the best is it, than these are clear for me, in turn I am not good in English. Again thanks.
Reza
April 27th, 2009
Thanks,
Nice and easy tute.
Jordan Garn
May 1st, 2009
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
May 7th, 2009
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
May 7th, 2009
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
May 9th, 2009
Keep up the great work, thanks.
alin
May 11th, 2009
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
May 12th, 2009
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
May 12th, 2009
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
May 13th, 2009
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
May 14th, 2009
Thanks a lot for this explanation Alin. Very nice
charlie
May 15th, 2009
Thanks for helping me along the way. This is proving to be very helpful!
Clinton
June 7th, 2009
Just working my way through these. Excellent series! Keep up the sterling work!
Muditha
June 23rd, 2009
Thank u thank u thank u……………!!!
Very useful tutorial
it is EC to learn thanks again Jeff
RobertT
June 24th, 2009
This is why I love programming. Content like this on the web for free. Awesome. Thanks
myutmost
June 24th, 2009
thank you.