javascript - 获取高度动画后的回调

Question

Here我尝试在高度动画之后运行一些代码

<button id="btn1">Animate height</button>
<div id="box"style="background:#98bf21;height:100px;width:100px;margin:6px;"></div>

$(document).ready(function () {
  $("#btn1").click(function () {
    $("#box").animate({height:"300px"});
  });

  var x = $('#box').height();
  if(x == 300){alert('animation is finished');}
});

我无法将我想要在高度动画之后运行的代码放入动画方法回调中，因为动画框脚本放置在一个文档中，而我想要在其他文档中运行的代码。

Answer 1

使用jquery .promise().done

$(document).ready(function () {
    $("#btn1").click(function () {
        $("#box").animate({
            height: "300px"
        }).promise().done(function () {
            alert('animation is finished');
        });;
    })
});

或者像这样分开:

$(document).ready(function () {
    $("#btn1").click(function () {
        $("#box").animate({
            height: "300px"
        });

        $("#box").promise().done(function () {
            alert('animation is finished');
        });
    })
});

Fixed Fiddle