Jquery offers basic animation capabilities through a method called .animate. Through the use of .animate it is possible to create scenarios for users such as clicking on an arrow to move a div tag and its contents in any direction, or to cause pictures or other objects to float across the page. So let’s animate.
1. Open animate.html, choose Live View, and experiment with the arrows that appear in the wysiwyg view. [footnote]
[/footnote] As you click the arrows, yet another monkey should move in the direction indicated by the arrow.
2. Now let’s look at the simple code that supports this rudimentary animation. First, take a look at the .munk CSS style which is set to position:absolute and has additional characteristics that determine it’s height, width, and position on the page.
.munk {
position:absolute;
left:142px;
width:144px;
height:187px;
margin:5px;
top:90px;
}
3. Just inside the body tag you will see the code for the buttons:
All of the buttons have ids such as (surprise) left, right, up, down. The pieces of code that create the arrows are known as “character entities”. [footnote] fyi: wikipedia has an exhaustive list of character entities if you are interested.[/footnote]
4. Next is the <script> tag followed by 4 separate functions. Let’s look at the first one, which is also shown below.
It starts by telling the browser which button, when clicked, activates the function; in this case the button with the id of #right. Afterward, it defines the function which tells the #munk div tag to add 50px to its left value; in other words, move 50px to the right. It also tells it to move slow.
5. The remaining three functions are VERY similar. They tell the browser to respond to each of the remaining arrows and move the .munk 50px left, up, and down. The two functions that move the monkey vertically reference the “top” value and add or subtract 50px depending on the direction.
6. Now that you know how it works, play with those px values a bit to increase and shorten the distance value of a given click.
7. Experiment with animation speed by changing the “slow” values to “fast”. Just like the slideToggle lesson, the “slow” setting is set to 600 milliseconds while “fast” is set to 200 milliseconds. In other words, the larger the number of seconds that are dedicated to the animation, the slower the animation. For example, $(“#munk).animate({“left”:+=500px}, “2000”); will take two seconds to proceed through the animation, while $(“#munk).animate({“left”:+=500px}, “500”); will animate in just 1/2 of a second and therefore be faster. Try different numeric values in place of “slow” and “fast”. Get crazy…..
8. Moving the monkey right and left is a nice accomplishment but what if you want that monkey (or any other div tag) to rotate? Although jquery doesn’t directly support rotation, there is yet another jquery add-on that does, and it is conveniently located in the same jq1 folder that you should already be working in. It is named jqRotate.js. So hook it up by adding this line of code:
<script src="jqRotate.js"></script>
to your document’s header below the other line
<script src="http://code.jquery.com/jquery-latest.js"></script>
that calls jquery. If you add it before the line that calls jquery, you will be disappointed in the result.
9. Now, create a new button and id by copying and pasting <button id=”down”>↓</button>. Change ↓ to ® which will create a nice new symbol. Change the id name from “down” to “rotate”.
10. Next, copy and paste one of the pre-existing functions, such as the one shown below.
$("#right").click(function(){
$(".munk").animate({"left":"+=50px"),"slow");
})
Once you have pasted it change $(“#right”).click to $(“#rotate”).click in order to target the rotate button that you just created. Next, change (“.munk”).animate({“top”: “+=50px”}, “slow”); to the much simpler statement: $(“.munk”).rotate(30);
By the way, the number 30 is arbitrary and indicates the number of degrees to rotate. Smaller or larger numbers work as well.
12. Test it. Was that satisfying? I certainly hope not because it only rotates once and stops! When you click again nothing happens. Wouldn’t it be much cooler if we could make it rotate more every time we click the button? Here’s how.
13. Right underneath the script tag create a new variable called more [footnote] As you can tell this variable name is arbitrary [/footnote] and set its value to zero. By the way, Javascript requires that new variables be specified with the term var before the name; exactly as you are creating the more variable.
14. Next, modify the rotate function as shown below.
What you are doing is creating a scenario in which the more variable increases by 30 each time the button is clicked [footnote] that’s what the more+=30; line does [/footnote] and afterward, using that value to rotate the “munk” div tag which contains the monkey. Try it. Once it works, figure out how to make the monkey rotate counter clockwise.
15. Before we leave the topic of animation let’s look at one more aspect: automation. Open the file named autoanimate.html, click live view and watch what happens. In this case the monkey floats up and right until he disappears from the screen.
16. Take a look at the code inside of the script. It begins by setting a new variable called xx to a value of 0. Next, xx is used to define a “while” statement which makes an action or set of actions occur “while” xx is less than 111. In this case those actions tell the munk div tag to move five pixels to the right and upward. This movement reoccurs each time the xx variable is incremented by one. This is what the xx++ statement is for at the bottom of the script. Note as well, that the speed of the animation is set to a very fast 1. This is necessary because the distance that the div tag moves is just 5px. Keeping the distance small and the speed fast makes for a smoother animation.
17. Play with the numbers. Speed the animation up, reverse it, etc. There are lots of possibilities here. With additional programming it would be possible to make the animation circle around the page perpetually, reverse itself, etc. To explore one such scenario, open and inspect the file called autoanimate2.html.