We can create custom animations using the J query animate method.
Let's start with a basic example.
We'll create a script that animates the movement of an element moving from one position to another.
As seen here
we can see that this where it moves from left to right after we click the Start animation button.
Now let's go through this script to illustrate how this works.
First we create a div element and give it an I.D..
In this case square next we create our button with the label start animation.
Next we create a style sheet in our head tag the style rules will be applied to this square so we'll
set the I.D. selector to square.
Now we need to create several style definitions that will be applied to the square the background of
the square was glue the height in which was one hundred and sixty by one hundred and sixty pixels.
There is a small margin to keep a bit of a gap between the square and the button.
So we set the margin top attribute to five pixels.
We've also assigned a position attribute and set it to absolute.
The reason is that elements by default have a static position and we explain that in the CSF section
of discourse static elements cannot be moved to manipulate the position.
The element must be position is either relative fixed or absolute
once this style rules are have been created.
We can go ahead and create the script.
Now the script is fairly straightforward restart with our document ready function.
Next we apply a click event to the button and that's what specifies that the next action should begin
when the button is clicked.
Then we create the animate action
and apply it to the square.
So once the button is clicked we want to animate the square
the enemy method has a few parameters.
So first
left eight hundred pixels.
That means that the object will move eight hundred pixels from the left side.
So it'll move in the right direction.
Eight hundred pixels the next parameter 1000 is the speed at which the element moves.
In this case we've set it to 1000 and that equates to 1000 milliseconds or one second and that's all
there is to it.
That's how this animation effect was created.