jQuery 动画的回调函数（完成）在开始时执行？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5397260/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
animate's callback function (complete) executed at start?
提问by Overbeeke
I'm using jQuery 1.5.1 This is my code:
我正在使用 jQuery 1.5.1 这是我的代码：
$('.cellcontent').animate({
left: '-=190'}, {
easing: alert('start ani'),
duration: 5000,
complete: alert('end ani')});
I get both alerts before the animation starts!? I want the complete function to start after the animation has ended. Any thoughts?
我在动画开始前收到两个警报！？我希望在动画结束后启动完整的功能。有什么想法吗？
回答by Bradford
You need to pass a function to call. Instead you are calling the function.
您需要传递一个函数来调用。相反，您正在调用该函数。
complete: function() { alert('end ani'); }
回答by Rocket Hazmat
I see two things wrong with this.
我认为这有两个问题。
One, easingshould be:
一，easing应该是：
A string indicating which easing function to use for the transition
一个字符串，指示用于过渡的缓动函数
And completeshould be a function.
并且complete应该是一个函数。
alert('start ani');
$('.cellcontent').animate({
left: '-=190'
},
{
easing: 'swing',
duration: 5000,
complete: function(){
alert('end ani');
}
});
回答by Alan Geleynse
You need to pass a function to complete.
你需要传递一个函数来完成。
Try this:
尝试这个：
$('.cellcontent').animate({
left: '-=190'}, {
easing: alert('start ani'),
duration: 5000,
complete: function() { alert('end ani') }
});
Since complete expects a function, it executes the code you pass to it to get a function object that it can call back to when finished.
由于 complete 需要一个函数，因此它会执行您传递给它的代码以获取一个函数对象，该对象在完成后可以回调。
回答by Aram Mkrtchyan
Best solution is this.
最好的解决办法是这样。
$('.cellcontent').animate({
left: '-=190'}, {
easing: alert('start ani')
}, duration).promise().done(function () {
alert('end animation');
});
回答by jekie
from the jquery docs:
来自jquery 文档：
$( "#clickme" ).click(function() {
$( "#book" ).animate({
opacity: 0.25,
left: "+=50",
height: "toggle"
}, 5000, function() {
// Animation complete.
});
});
回答by Caspar Kleijne
declare them in a function first, otherwise the method is called instantly:
首先在函数中声明它们，否则立即调用该方法：
var onComplete = function () {
alert('end ani');
};
then call them without the ()
然后在没有 () 的情况下调用它们
$('.cellcontent').animate({
left: '-=190'}, {
easing: 'slow',
duration: 5000,
complete: onComplete //<-- function is passed as a variable, not called directly
});
orwrap them directly into a function (less readable and slower when calling this a lot):
或将它们直接包装到一个函数中（大量调用时可读性较差且速度较慢）：
$('.cellcontent').animate({
left: '-=190'}, {
easing: 'slow',
duration: 5000,
complete: function () {
alert('end ani');
}
});
回答by user2323922
I dont think you need "complete"?
我不认为你需要“完整”？
slideToggle(
"fast","swing", function(){
// your code here
}
);回答by Milap Neupane
$('.cellcontent').animate({
left: '-=190',
easing: 'slow',
duration: 5000,
function () {
alert('end ani');
}
});
