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.
Every browser has different CSS properties for less-used actions like: transparency or opacity.
It was something weird to do transparency on your web page because there are lot of different web browsers. To make that easy, I have collected information and generated a CSS class that will work on most of the browsers.
See the Code below:
filter:alpha(opacity=75); is used for Internet Explorer.
-moz-opacity:0.75; is used for Mozilla, Firefox, Netscape browsers (old versions).
-khtml-opacity: 0.75; is used for old versions of Safari.
opacity: 0.75; is used as a standard CSS property for browsers like Firefox 2+ and Safari 3+ and Opera