Animated objects not continuing to animate after detaching and appending

Question

I have several images that are being animated (faded out and in) that I want to hide and show. Using hide() and show() doesn't work as they just fade themselves back in. I thought I could detach() them and then appendTo() them, which works, but the animation doesn't continue after they're reattached. Some code follows:

Animation

function loading() {
    $('#load0').delay(300).fadeIn(200);
    $('#load1').delay(500).fadeIn(200);
    $('#load2').delay(700).fadeIn(200);
    $('#load0').delay(500).fadeOut(75);
    $('#load1').delay(700).fadeOut(75);
    $('#load2').delay(900).fadeOut(75, loading);
}
loading();

Detachment and Appending

var load;
$('#slideshow').on('cycle-before', function() {
    load = $('.load').detach();
});
$('#slideshow').on('cycle-after', function() {
    load.appendTo("#main");
});

How can I hide and re-show these elements?

No... They fade in sequentially, and then fade out sequentially. — NaOH, Nov 17 '13 at 01:53
No, all three fade in adjacent to one another, and then all three fade out. You can see it (briefly) here: http://www.element17.com. — NaOH, Nov 17 '13 at 01:58

score 1 · Accepted Answer · answered Nov 17 '13 at 01:55

I believe your first issue is with the last line "$('#load2').delay(900).fadeOut(75, loading);" If "load2" doesn't exist in the DOM (because you detached it), the loading method can't be called again. You'll either have to call loading() again when you appendTo or you can check to see if the items are in the DOM and if not, you can call the loading() function. You may also run into an issue in some browsers with recursion calling the function again and again from within itself. Each browser handles the number of calls differently and some just use the execution time and not the recursive level.

function loading() {
  $('#load0').delay(300).fadeIn(200);
  $('#load1').delay(500).fadeIn(200);
  $('#load2').delay(700).fadeIn(200);
  $('#load0').delay(500).fadeOut(75);
  $('#load1').delay(700).fadeOut(75);
  $('#load2').delay(900).fadeOut(75, loading);
}

Animated objects not continuing to animate after detaching and appending

1 Answers1