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

Answer 2

您只需使用complete属性作为回调函数：

.animate( properties [, duration ] [, easing ] [, complete ] )

来自http://api.jquery.com/animate

这是demo

Answer 3

事件驱动的JavaScript a la jQuery：

//file 1
$("#box").animate({height:"300px"},function() {
 $(this).trigger('myBoxFinishedAnimatingHeight');
});

//file 2
$('#box').on('myBoxFinishedAnimatingHeight',function() {
 //your code
});

Answer 4

$("#adjest").animate({"height":"300px"},1000);
$("#adjest").promise().done(
   function() {
        alert("done");
    }
);

如果你不能在animate（）中运行它，我会使用promise和done。看到这里

http://jsfiddle.net/5p8Ww/

Answer 5

您可以为文件命名空间并调用函数...

var NameSpace = Namespace || {};

NameSpace.yourFunction() {
    //Do stuff...
}

然后在你的html / other文件中

.animate( properties , 1000, ease, NameSpace.yourFunction())

高度动画后获取回调

5 个答案: