jQuery Animate


Posted on May 19th, by Alaa Badran in Browsers, CSS, Design, DHTML, Free Stuff, Java Script, Jquery, Web & Programming. 12 comments

jQuery Animate

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.



increasing/decreasing width and height

Increasing div width with animation has a simple code:
having a div with 100% width and height of 250px

$('div').animate({'width':'10%','height':'50px'},1500); /* This will decrease the width to 10% and height to 50 pixels with animation. */

As you can see, we may use one property or more than one property separated with commas.
see it in action:

Click here to animate width and height.


moving or scrolling html element

To change html element's position with animate, you can change the css top and left properties as follows:

$('div').animate({top:'100px', left:'100px'},1500);

see it in action:

Click here to change this div's location.


changing opacity

Changing opacity of html element can be animated as follows:

$('div').animate({opacity:0.1},1000); /* Changes the opacity from 1 to 0.1 while 1 is the normal view. */

see it in action:

Click here to change this div's opacity.


scrolling window

This item was added to this blog before in Scroll window smoothly in jQuery

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

You can do more with this function. Try more properties.
See also:
jQuery Animate - Advanced





12 thoughts on “jQuery Animate

  1. I have tested the issue you provided about right floating and animation… The result was that everything is working fine and the floating div stays the the right side while animating.
    In this case, while you are experiencing a problem, you may have a CSS conflict.
    Please give a chance to see the code to provide you with the solution.

  2. What about if…
    1. i have a div display:none,
    2. i want to use the efect of slideDown() to show it,
    3. but starting from a height of 100px (dynamic value)
    4. to a height set by the content within?

  3. This is my first time i visit here. I found so many interesting stuff in your blog, especially its discussion. From the tons of comments on your articles, I guess I am not the only one having all the enjoyment here! Keep up the excellent work.

  4. changing opacity of the div by mouse over on it:

    $(document).ready(function(){
    $(“div#ID-of-this-div”).hover(
    function() {
    $(this).stop().animate({“opacity”: “1”}, “slow”);
    },
    function() {
    $(this).stop().animate({“opacity”: “0.4”}, “slow”);
    });

    });

Leave a Reply

Your email address will not be published. Required fields are marked *