我想使用一个jquery动画两次更改元素的高度，但我不能。怎么做？

Question

我想使用一个jquery动画两次更改元素的高度，但我不能。怎么做？

我正在使用代码：

$("#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})
});

没有任何事情发生.. 但是，如果我删除任何一个高度动画，它工作正常。 提前谢谢..

Answer 1

您需要删除;：

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

Answer 2

您的代码中存在语法错误，您可能需要推迟第二个高度动画，直到第一个动画完成为止

$("#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
        });
});

Answer 3

让它成为一个链：

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