Categories
CSS Design DHTML Free Stuff Java Script Jquery Web & Programming Web Browsers

jQuery Animate – Advanced

Your ads will be inserted here by

Easy Plugin for AdSense.

Please go to the plugin admin page to
Paste your ad code OR
Suppress this ad slot.

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.
I mean,
We can use the default syntax of this function as follow:

$().animate({
/* params */ },
/* integet time period in milliseconds */
);

Categories
Browsers CSS Design DHTML Free Stuff Java Script Jquery Web & Programming

jQuery Animate

Your ads will be inserted here by

Easy Plugin for AdSense.

Please go to the plugin admin page to
Paste your ad code OR
Suppress this ad slot.

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
  • changing opacity
  • scrolling window

Now let me explain each in an example.

Categories
Browsers CSS Design DHTML Free Stuff HTML Java Script Jquery Misc Web & Programming Web Browsers XHTML

Scroll window smoothly using jQuery

Your ads will be inserted here by

Easy Plugin for AdSense.

Please go to the plugin admin page to
Paste your ad code OR
Suppress this ad slot.

Using jQuery animate() function to do a smooth scrolling:

I have also created a div as follow:


<div id="scrollToHere">
Scroll to here
</div>

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:


function scrollWin(){
$('html,body').animate({
scrollTop: $("#scrollToHere").offset().top
}, 800);
}

Here is something to try:

now jQuery window scrolling is done with animation.

Enjoy it..