我想使用一个 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").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 2

把它串起来：

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

Answer 3

您需要删除;:

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