Understanding jQuery animate() function

by · March 9, 2010

jQuery animate() function is very powerful API to manipulate html elements and add animation functionality. The use of animate function is very simple. First lets check the syntax of this function. .animate( properties, [ duration ], [ easing ], [ callback ] )
  • properties: A map of CSS properties that the animation will move toward.
  • duration: A string or number determining how long the animation will run.
  • easing: A string indicating which easing function to use for the transition.
  • callback: A function to call once the animation is complete.
.animate( properties, options )
  • properties: A map of CSS properties that the animation will move toward.
  • options: A map of additional options to pass to the method. Supported keys:
    • duration: A string or number determining how long the animation will run.
    • easing: A string indicating which easing function to use for the transition.
    • complete: A function to call once the animation is complete.
    • step: A function to be called after each step of the animation.
    • queue: A Boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediately.
    • specialEasing: A map of one or more of the CSS properties defined by the properties argument and their corresponding easing functions (added 1.4).
Lets learn the animate() function with set of examples. First include the jQuery javascript library in your html file. Add following in your html <HEAD> tag:
<SCRIPT type="text/javascript" 
		src="http://code.jquery.com/jquery-latest.js"></SCRIPT>

Code language: HTML, XML (xml)
For all the demos, we will use a sample DIV tag for animating. Following is the div code and its stylesheet.
<style type="text/css">
#content {
	background-color:#ffaa00;
	width:300px;
	height:30px;
	padding:3px;
}
</style>
<input type="button" id="animate" value="Animate"/>
<div id="content">Animate Height</div>

Code language: HTML, XML (xml)

Animate height/width

Animating height and width in jQuery is very easy. Lets assume you have a DIV that you want to animate i.e. increase the height.
$("#animate").click(function() {
	$("#content").animate(
			{"height": "80px"},
			"fast");
});

Code language: JavaScript (javascript)
Demo 1: Also following will be the code to animate Width of the element.
$("#animate").click(function() {
	$("#content").animate(
			{"width": "350px"},
			"fast");
});

Code language: JavaScript (javascript)
Demo 2:

Animate opacity

$("#animate").click(function() {
	$("#content").animate(
			{"opacity": "0.15"},
			"slow");
});

Code language: JavaScript (javascript)
Demo 3:

Moving elements using animate()

<STYLE>
#content {
	background-color:#6688ff;
	position:absolute;
	width:100px;
	height:100px;
	padding:3px;
	margin-top:5px;
	left: 100px;
}
</STYLE>
<input type="button" id="left" value="Left"/>
<input type="button" id="right" value="Right"/>
<div id="content">Move</div>

Code language: HTML, XML (xml)
$("#right").click(function() {
	$("#content").animate(
			{"left": "+=50px"},
			"slow");
});
$("#left").click(function() {
	$("#content").animate(
			{"left": "-=50px"},
			"slow");
});

Code language: JavaScript (javascript)
Demo 4:

Callback Function

Callback functions are very useful to perform certain activity when the animation is completed. Also note here when multiple elements are mapped with the animation and we have specified a callback function. Then the callback will get called for each of the element. Let us see an example where we use callback function to display a message when animation is completed.
$("#animate").click(function() {
	$("#content").animate(
			{"height": "100px", "width": "250px"},
			"slow", function(){
				$(this).html("Animation Completed");
			});
});
Code language: JavaScript (javascript)
Demo 5:

Combine multiple animations

You may want to combine multiple animations. Following are few demos will help you understanding this. Example 1: Animate both height and width at same time. This example is pretty straight forward. You can animate both height and width at same time by specifying it in animate function. For example: In below code we specified height and width value in animate function.
$("#animate").click(function() {
	$("#content").animate(
			{"height": "100px", "width": "250px"},
			"slow", );
});
Code language: JavaScript (javascript)
Example 2: Queuing the animations.
$("#animate").click(function() {
	$("#content")
		.animate({"height": "100px"}, 500)
		.animate({"width": "250px"}, 500);
});

Code language: JavaScript (javascript)
Demo 6:

Queuing of Events

In above demo (Demo 6) we saw that when we queued up the events with multiple .animate() method call, the animation is actually queued up. i.e. it completes the first animation and then proceed with next. Let see an example were we use queue parameter to disable queuing. In following example we have set parameter queue to false. The code is exactly same as demo 6, only change we added is queue = false. Also note that queue parameter is added with second argument.
$("#animate").click(function() {
	$("#content")
		.animate({"height": "100px"}, {"queue": false, "duration": 500})
		.animate({"width": "250px"}, 500);
});

Code language: JavaScript (javascript)
Demo 7:
Get our Articles via Email. Enter your email address.

Tags:

You may also like...

47 Comments

  1. Vikas says:
    10 March, 2010, 11:36  

    Ah… I guess you will explain how internally animate & fx function deals with timer queue!

    Reply
  2. rys says:
    20 April, 2010, 12:48  

    nice one, but I have something to ask if jquery work in a fancybox…?.

    Reply
  3. builder says:
    25 April, 2010, 22:31  

    Great tutorial. Thanks!

    Reply
  4. Anish chapagain says:
    15 May, 2010, 15:29  

    Love the tutorial…thanks and great work

    Reply
  5. Moorthy says:
    20 May, 2010, 11:13  

    Really nice one. great work. thanks buddy. try to keep on update

    Reply
  6. sachin says:
    27 August, 2010, 17:30  

    tohh…his is great

    Reply
  7. Neeraj Dhiman says:
    17 February, 2011, 11:58  

    This is really great. Thanks for the compilation!

    Reply
  8. dYcA says:
    11 April, 2011, 12:46  

    prikitiuw… great tutorial.
    thx plen

    Reply
  9. oyun says:
    15 September, 2011, 21:21  

    I lıve jQuery.I love jQuery animation.=)

    Reply
  10. IP says:
    27 September, 2011, 18:15  

    Awesome tutorial. Thanks lots. God bless you!

    Reply
  11. mahesh says:
    25 November, 2011, 16:46  

    nice one, but I have something problem in dremweaver or in browser please solve the problem which browser support this jquiry
    i write the code like this in dremweavercs5.5

    Untitled Document

    #content {
    background-color:#ffaa00;
    width:300px;
    height:30px;
    padding:3px;
}

$("#animate").click(function() {
    $("#content").animate(
            {"height": "80px"},
            "fast");
});

    Animate Height

    but it is not work

    Reply
  12. mahesh says:
    25 November, 2011, 16:52  

    ok brother great work it is working nice ,thnaking you ,god is bless you soooooooooomuch you, nice days brother

    Reply
  13. confusecious says:
    23 December, 2011, 13:20  

    Thanks for the examples!!

    For ‘moving elements’, (demo 4):

    If I click on ‘left’…it moves 50px, click again and moves 50px. But I only need to move it once, the second click i want it to be still.

    How would I do that?

    thanks

    Reply
    • Viral Patel says:
      23 December, 2011, 13:57  

      @Confusecious – To achieve such functionality you can define a flag and use it to animate/move element only once. For example:

      var leftflag = false;
$("#left").click(function() {
   if(!leftflag) {
   leftflag = true; 
       $("#content").animate(
               {"left": "-=50px"},
               "slow");
   }
});


      Hope this works :)

      Reply
      • Neha says:
        2 January, 2013, 18:08  

        Hi Viral,
        Your code mentioned above to click only once will work with Single Link button.If i have multiple link button my navigation is not working on send click.It is working when i am clicking first time.

        Can you please help me on this.

        Reply
        • Neha says:
          2 January, 2013, 19:20  

          Hi Viral,
          Updated Text…

          Your code mentioned above to click only once will work with Single Link button.If i have multiple link button my animationis not working on second click.It is working when i am clicking first time only(i.e. on first link button in )

          Can you please help me on this.

          Reply
  14. CS95 says:
    30 January, 2012, 12:12  

    Very usefull tutorial.

    Reply
  15. Alt says:
    7 February, 2012, 21:41  

    How does the reset button (next to the animate buttons) work?

    Reply
  16. vijay says:
    28 March, 2012, 11:29  

    i like your tutorial.
    i teach it.
    it’s very nice.

    Reply
  17. zamaan says:
    2 April, 2012, 13:14  

    great tuto. nice examples. really helped in my project. thanks alot.

    Reply
  18. Harry says:
    30 April, 2012, 15:52  

    Awesome tutorial.nice example of animate function

    Reply
  19. Giorgio says:
    16 May, 2012, 20:49  

    Congratulation for the clarity and many thanks!

    Reply
  20. Pradeep says:
    7 August, 2012, 15:39  

    Nice tutorial..really helpfull

    Reply
  21. hudson kotel says:
    7 September, 2012, 15:05  

    Hello,

    I am found the jQuery animate function related to the information with php in google. & I have obtain new link related to jQuery animate function with php.These link very useful to my project & other work. This link is….

    http://www.phphunt.com/122/animate-example-in-jquery?show=123#a123

    Reply
  22. Matth Jenks says:
    20 November, 2012, 23:02  

    Thank you. Very helpful for those of us who want to *learn* jquery rather than just *copy* someone else’s code.

    Reply
  23. lakshmi says:
    27 November, 2012, 15:55  

    how to make movement of moving boxes as much as fast, with out affecting other animations

    Reply
  24. MickeyNotD says:
    6 December, 2012, 4:04  

    I working with Demo 5, the Callback Function. I don’t want to use the “Reset” button. Instead, I’d like to have a “Back” text link at the end of the text in the expanded window. For example, check the last line of code; I wrote what I need to happen in UPPER CASE :

    <script type="text/javascript">
$("#animate").click(function() {
	$("#content").animate(
			{"height": "100px", "width": "250px"},
			"slow", function(){
				$(this).html("<b>bunch of text here.</b> THEN HERE, HAVE A "Back" TEXT LINK THAT HAS THE SAME EFFECT AS RESET");
			});
});

</script>

    If worse came to worse, then a button would be OK too. Using a text link i’s more for aesthetic purposes in the case.

    Thanks.

    Mickey

    Reply
  25. Neha says:
    7 January, 2013, 17:12  

    Hi Viral,
    Updated Text…

    Your code mentioned above to click only once will work with Single Link button.If i have multiple link button my animationis not working on second click.It is working when i am clicking first time only(i.e. on first link button in )

    Can you please help me on this.

    Reply
  26. kensley says:
    5 February, 2013, 19:59  

    This post is very nice but its missing one tiny tiny tiny addition that will make it amazing…
    Click the same button a second time and have the box animate in reverse process. How hard is it to do that? What steps are involved?

    Thanks again

    Reply
  27. praveen says:
    29 March, 2013, 12:44  

    I want more real time examples to understand jquery plz sent some exp

    Reply
  28. ajai says:
    4 April, 2013, 13:57  

    good examples……

    Reply
  29. chanchal says:
    5 April, 2013, 10:47  

    Thanks.Its good and helpful

    Reply
  30. Tarocchi amore says:
    18 May, 2013, 15:49  

    Need some more tutorials like this

    Reply
  31. suresh kumar s says:
    30 May, 2013, 10:47  

    Itz very basic tutorial right…i want more recent animate concepts….

    Reply
  32. Saravanan says:
    7 June, 2013, 15:24  

    Nice tutorials… Thanks ……..

    Reply
  33. Nisha says:
    12 June, 2013, 17:23  

    Give me more in detail

    Reply
  34. Gurpreet says:
    20 June, 2013, 11:38  

    It is very helpful tutorial for me….

    Thanks guys..!!

    Reply
  35. Saujanya Reddy says:
    11 November, 2013, 15:41  

    Thank you for your tutorial :)

    Reply
  36. Ravikumar says:
    11 February, 2014, 15:44  

    Super………

    Reply
  37. Fhumz says:
    23 April, 2014, 3:59  

    Howzit Bra,
    I am loading content into a div using AJAX. The div has a minimum height of 300px and as such when i load content the div expands to various heights depending on the height of the loaded content. i would like the div’s height to animate each time new content is loaded.

    Please assist me. Thanks in advance

    Reply
  38. BBera says:
    23 April, 2014, 13:48  

    I have three animation function

    setTimeout(function() {
    $(“.lock10”).animate({opacity: “toggle”}, 5000).delay(3000).animate({opacity: “toggle”}, 5000)
    },5000);

    setTimeout(function() {
    $(“.lock10”).animate({opacity: “toggle”}, 5000).delay(3000).animate({opacity: “toggle”}, 5000)
    },7000);

    setTimeout(function() {
    $(“.lock10”).animate({opacity: “toggle”}, 5000).delay(3000).animate({opacity: “toggle”}, 5000)
    },9000);

    I want to restart all from first AFTER COMPLETE all animation

    don’t want to use SetInterval

    Reply
  39. Kirtan Patel says:
    14 May, 2014, 12:12  

    Hi,

    My below code not working for ie 7,8,9 version,

    Please help me.

    <html>
<head>
    <title>html scale demo </title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <style type="text/css">
        html, body {
            padding: 0;
            margin: 0;
        }

        #div1 {
            
            background-color: #ff0000;
            width:100%;
            height:200px;
        }
    </style>
    <script type="text/javascript">
        function anim()
        {
            $("#div1").animate({ "opacity": "0.5" }, {
                step: function (now, fx) {
                    $(this).css('-webkit-transform', 'scale(' + now + ')');
                    $(this).css('-moz-transform', 'scale(' + now + ')');
                    $(this).css('-ms-transform', 'scale(' + now + ')');
                    $(this).css('-o-transform', 'scale(' + now + ')');
                    $(this).css('transform', 'scale(' + now + ')');
                },
                duration: 1200
            }, 'linear');
        }

        function reset()
        {
            $("#div1").removeAttr("style");
        }
    </script>
</head>
<body>
    <div id="div1">
        dummy test gose here
    </div>
    <button id="btnAnimate" onclick="anim();"  type="button" >Animate</button>
    <button id="btnReset" onclick="reset();"  type="button" >Reset</button>
</body>
</html>

    Reply
  40. Selvam says:
    26 June, 2014, 11:30  

    It is very helpful tutorial for me….
    Thanks

    Reply
  41. Chris says:
    22 August, 2014, 16:49  

    Thanks for this!
    @BBera: Maybe this will help you. Its a function to solve a similar problem.

    function blink() {
    var o1 = $('#test span').first();
    var o2 = $('#test span').next();
    o2.hide();
    $('#test span').css('position', 'absolute');
    var animate = function() {
        var c = 0;
        o1.fadeOut(1500, function() {ready(++c);});
        o2.fadeIn(1500,  function() {ready(++c);});
    };
    var ready = function(a) {
        if(a === 2){
            var tmp = o1;
            o1 = o2;
            o2 = tmp;
            animate();
        }
    }
    animate();
}

    Reply
  42. jitu says:
    11 October, 2014, 11:55  

    i Love This Ecample

    Reply
  43. suraj says:
    8 December, 2016, 15:41  

    Wow Amazing example thanks for sharing

    Reply
  44. Harold.Stanford says:
    8 June, 2020, 0:12  

    Every successful person has a beginning

    Reply

Leave a Reply

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

Follow: