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.