Two callbacks after animating single element

Question

I'm scratching my head as to why I'm getting two callbacks when running this function.

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');
        });
    });
});

As you can see I start by assigning a clone to lE. Surely lE can only be a single element at this point no?

I then proceed to run a three animations within each other but the second animation get's called back twice. I can't understand why.

@Satpal event happens on button click, so I'm cloning the html/css of the button I just clicked to create an element that looks exactly like it and then animate it — Juicy, Jul 16 '14 at 12:47
Since you cloned `lE` and appended it to the body, there are two of them in the dom. When you animate multiple elements, you get a callback when each one is complete. See the marked duplicate for examples of how to get around it. — Kevin B, Jul 16 '14 at 13:39

score -1 · Answer 1 · answered Jul 16 '14 at 12:49

I've got problems while using multiple chain callbacks before. Try to use setTimeout instead of function callbacks. This method worked on me before.

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);

Two callbacks after animating single element

1 Answers1