In the last jQuery Animate article I wrote, I mentioned how to use the .animate() function with few tricks.
But here, I am going to write about jQuery Animate function in general and I will explain few things and some tricks.
The jQuery Animate is a smart object because could be used at any syntax.
We can use the default syntax of this function as follow:
/* params */ },
/* integet time period in milliseconds */
Here I will mention how to use the jquery animate function and the usability and flexibility of it.
The syntax of this function is:
$.animate(options, settings, callback);
/* you can replace setting with duration (in milliseconds) or words: ‘slow’, ‘normal’ or ‘fast’.
callback is optional */
Below is a list of popular and most used animation:
increasing/decreasing width and height
moving or scrolling html element
Now let me explain each in an example.
Using jQuery animate() function to do a smooth scrolling:
I have also created a div as follow:
Scroll to here
You need something to run your script. Create a button like this:
<input type=”button” onclick=”scollWin();” value=”Scroll up” />
The jQuery Code will be like this:
Here is something to try:
now jQuery window scrolling is done with animation.