I want to change the height of an element twice using one jquery animation but I can't. How to do it?

Question

I am using the code:

$("#animate").click(function() {
$("#content")
    .animate({"height": "200px"},{"queue": true, "duration": 500})
    .animate({"width": "250px"}, {"queue": true, "duration": 500});
    .animate({"height": "100px"},{"queue": true, "duration": 500})
});

And nothing is happenning.. But if I remove any one of the height animation it works fine. Thanks in advance..

try thisL: $("#content") .animate({"height": "200px"},{"queue": true, "duration": 500}) .animate({"width": "250px"}, {"queue": true, "duration": 500}) .animate({"height": "100px"},{"queue": true, "duration": 500}) }); — Amyth, Apr 10 '13 at 06:33
after the width animate statement you close it using ';' jQuery does not know to which element it should apply the third animate statement. Eitherremove the ';' or specify the element for the third animate statement. — Amyth, Apr 10 '13 at 06:34

score 4 · Answer 1 · answered Apr 10 '13 at 06:32

4

You need to remove the ;:

.animate({"width": "250px"}, {"queue": true, "duration": 500}); // <-- Here

answered Apr 10 '13 at 06:32

Eli

14,779
5
59
77

Arun P Johny · Accepted Answer · 2013-04-10T06:39:41.063

There is a syntax error in your code as well as you may have to postpone the second height animation till the first one is completed

$("#animate").click(function() {
$("#content").animate({
            "height" : "200px"
        }, {
            "queue" : true,
            "duration" : 500,
            complete : function() {
                $(this).animate({
                            "height" : "100px"
                        }, {
                            "queue" : true,
                            "duration" : 500
                        })
            }
        }).animate({
            "width" : "250px"
        }, {
            "queue" : true,
            "duration" : 500
        });
});

score 1 · Answer 3 · answered Apr 10 '13 at 06:35

1

make it in a chain:

$("#content").animate({"height": 200}, 500, function(){
   $(this).animate({"width" : 250}, 500, function(){
      $(this).animate({"height" : 100}, 500)
   })
});

answered Apr 10 '13 at 06:35

Seer

739
4
22

I want to change the height of an element twice using one jquery animation but I can't. How to do it?

3 Answers3