jQuery动画不会触发回调函数

Question

我有以下jQuery动画功能：

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

动画本身有效。根据需要，$myDiv幻灯片具有easeInOutExpo效果。但是，回调函数永远不会被触发。为了测试它，我将回调更改为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');
    },
});

Demo

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

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

Demo

Answer 3

  

一种方法是使用 JQuery Promise

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

     alert('hi done');

});