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

0
  

39 Comments to “jQuery Animate”

  1. admin 29 June 2009 at 10:12 am #

    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.

    Reply
  2. ugg boots 21 January 2010 at 9:36 am #

    the entry is good!

    Reply
  3. dk 15 April 2010 at 9:41 am #

    $(“id”).animate({“height”: “toggle”}, { duration: 1000 }); is not properly works in IE 8. why?

    Reply
  4. admin 15 April 2010 at 5:54 pm #

    Try to use:

    $(“#id”).slideToggle(speed);

    This will toggle the height from 0 to actual height OR reverse.

    Reply
  5. Howard 22 April 2010 at 7:24 pm #

    I visit regularly and always something interesting like this is posted. Thanks again.

    Reply
  6. builder 25 April 2010 at 8:11 pm #

    Very nice ;)

    Reply
  7. Tutorials99 23 May 2010 at 10:03 pm #

    Thanks for the this, it’s extremely extensive and useful!,do check out the link below

    http://www.tutorials99.com

    where all tutorials have a Higher page rank and professional.Very helpful for beginners…

    Reply
  8. Alqin 24 June 2010 at 7:58 pm #

    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?

    Reply
  9. Jake 28 June 2010 at 12:23 am #

    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.

    Reply
  10. tembel oyun 16 October 2010 at 9:50 pm #

    Thanks you very much! Wonderful slide!..

    Reply
  11. Livepage 22 April 2011 at 1:26 pm #

    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”);
    });

    });

    Reply
  12. Tutorials 3 October 2011 at 5:19 am #

    thanks for sharing i was looking for this tutorial.

    Reply

Leave a Reply