javascript - jQuery动画不触发回调函数

Question

我有以下 jQuery 动画功能：

$myDiv.animate({ "left": "0%" }, { duration: 1000, easing: 'easeInOutExpo' }, 
    function () {
        alert('hi');
    }
);

动画本身有效。$myDiv根据需要滑动easeInOutExpo效果。但是，回调函数永远不会被触发。为了测试它，我将回调更改为 just alert("hi");，如上所示。还是不行。

我可能做错了什么？

Answer 1

试试这个

演示：jsFiddle

  $("#myDiv").animate({ "left": "0%" }, { duration: 1000, easing: 'easeInOutExpo' , 
    complete:function () {
        alert('hi');
    }
   }
);

Answer 2

这里有几件事需要修复：

1. 确保在代码中包含 jQuery UI，因为easeInOutExpo它不是标准 jQuery 库的一部分。
2. 您的语法错误：您将animate()函数的两个不同选项混合在一起。

要么是

$(element).animate(properties [,duration] [,easing] [,complete]);

或者

$(element).animate(properties, options)

options像这样格式化的对象在哪里：

{
  duration: number,
  easing: string,
  complete: function,
}

您已经选择了第二个选项，因此您需要正确格式化它以complete将对象的属性options用于您的函数：

$myDiv.animate({
    "left": "0%",
}, {
    duration: 1000,
    easing: "easeInOutExpo",
    complete: function () {
        alert('hi');
    },
});

演示

或者，您可以使用第一个格式选项：

$("#myDiv").animate({
    "left": "0%",
}, 1000, "easeInOutExpo", function () {
    alert('hi');
});

演示

Answer 3

一种方法是使用JQuery Promise

$myDiv.animate({ "left": "0%" }, { duration: 1000, easing: 'easeInOutExpo' }).promise().done(function(){

     alert('hi done');

});