动画单个元素后的两个回调[重复]答案

【问题标题】：Two callbacks after animating single element [duplicate]动画单个元素后的两个回调[重复]
【发布时间】：2014-09-06 23:59:52
【问题描述】：

为什么我在运行这个函数时会收到两个回调，这让我摸不着头脑。

lE = $(this).clone().appendTo('body');

// Hide submenu
$('nav>ul>li>ul').fadeOut(100, function() {
    // Animate clone
    $(lE).animate({ 'top': '160px' }, 100, function() {

        console.log('aaa'); // PRINTS TWICE IN CONSOLE

        $(lE).animate({ 'left': '150px' }, 300, function() {
            $(lE).addClass('lE');
        });
    });
});

如您所见，我首先将克隆分配给 lE。当然，此时 lE 只能是单个元素，不是吗？

然后我继续运行三个动画，但第二个动画被调用了两次。我不明白为什么。

【问题讨论】：

这段代码在什么事件下运行？
有小提琴可以玩吗？
什么是this in line lE = $(this).clone()？
在lE前面加var？
@RoryMcCrossan 这是一个按钮点击

标签： jquery animation callback

【解决方案1】：

我之前在使用多个链回调时遇到了问题。尝试使用setTimeout 而不是函数回调。这种方法以前对我有用。

lE = $(this).clone().appendTo('body');

$('nav>ul>li>ul').fadeOut(100);

setTimeout(function() {
    $(lE).animate({ 'top': '160px' }, 100);
},100);

setTimeout(function() {
    $(lE).animate({ 'left': '150px' }, 300, function() {
        $(lE).addClass('lE');
    });
},200);

【讨论】：