0

I am creating a slideshow and would like to know if I can get a Promise out of the append() function so I can trigger an animation only when the next slide is in place.

$.when( $('#slides').append('<div class="slide"></div>') ).done(animation);

When I try the above, the animation occurs before the slide is appended. My intention is to have the animation only start after the slide is appended to the element.

Update

My slideshow as dots on the button that, when clicked, trigger (1) the requested slide to be appended to #slides and (2) the left of the first slide (assuming there are now 2 slides) is decreased, ending with (3) the :first slide is removed. Since append() is async [@Guffa], the decrementing of the left occurs before the append() fires.

Example: jsfiddle

Update

I have tried using

$.when( $('#slides').append('<div class="slide"></div>').promise() ).then(animation);

and it also does not provide the desired animation.

RKichenama
  • 324
  • 3
  • 9
  • 1
    The `append` method is not asynchronous. The slide is already there when the `append` method returns. What is it that you experience that leads you to think that it is not? – Guffa Oct 03 '13 at 21:00
  • If you're waiting for an image to load before the slide animates, [there's a few tricks involved](http://stackoverflow.com/a/19122698/901048). – Blazemonger Oct 03 '13 at 21:03

0 Answers0