So basically what that does is move “.myDiv” by 500 pixels from the left. “left” is a standard CSS positioning property. Notice that myDiv is positioned 10 pixels from the left in the initial CSS rules. And the font size grows from 12px to 36px.
So obviously the animate() method is doing all the work here. It’s applied to the elements selected by the $(“.myDiv”) selector, which in this case is just one element, but it could move multiple elements at the same time. It receives several parameters which configures exactly how it will animate. The first parameter is a list of CSS properties to “tween” style animate from their current settings to what’s written in here.
The “5000” in the second parameter saying how long the animation should take to move those 490 pixels (i.e. from 10 pixels from the left to 500 pixels from the left).
The 3rd parameter is a function that is called at the end of the animation, which in this case will simply alert you that the “animation is complete!”
Now that’s the end of the tutorial, but lets look at how all the components truly look on a web page. I left out some required syntax that is really easy to remember--because it’s required and you’ll use it a lot--but wasn’t conducive to learning the main topics. Often when learning programming, they’ll flood you with tons of syntax and then get to the main topics, and it’s hard to know what you should be focusing on...So now that you got the main concepts, let’s look at the required syntax this is missing:
So notice the <script> tags that wrap the jQuery, and that also embed the jQuery framework at the top. Notice how the CSS is similarly wrapped, but in <style> elements. And notice how the page is wrapped in <html> tags, and how it’s separated into 2 parts: <head> and <body>. The <head> is where you declare a bunch of meta data and generally where you enter helper tools like the jQuery framework etc.