To showcase the use of $clear()
, we'll use one of its complimentary functions, periodical()
. We'll create a function that will transition #bluebox
to the left in increments of 50 pixels, five times. Then we're going to stop executing the function further (or else it will keep moving to the left infinitely).
First, we'll create an integer object that will hold the number of times our function has executed.
var counter = 0;
Next, let's create our function, we'll called it
moveLeft()
.var moveLeft = function() { // our function code goes here. }
Inside
moveLeft
, we'll write use thetween()
method to move#bluebox
to the left.$('bluebox').tween('margin-left', (counter+1)*50);
Now, we need to increment the counter every time the function is called. We'll use the following line of code, which will execute as soon as our box has finished the animation to the left:
counter++;
Let's now use
periodical()
to execute themoveLeft()
at...