jquery - 我想使用一个 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)
   })
});