Question

I’m having trouble determining how to use Deferreds to run a callback after an animation sequence completes. If I was animating only one thing, I know I could just use .promise() on the end of the animate/fade/slide, but with trying to animate multiple things, I’m not sure how to work it in.

My code so far is below:

var delayTime = 0;
$stack = $('li'); // returns five list items.
$stack.each(function(index, element) {
    $(element).delay(delayTime).animate({ opacity: 0.3 }, 500, function() {
        $(element).animate({ opacity: 1 }, 500);
    });
    delayTime += 1250;
});

I want to run a callback at the end, after all elements fade in and out, in succession.

Answer 1

<script src="js/jquery/jquery-1.7.1.js"></script>

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

<script>
    $(function() {
        var delayTime = 0;
        var $stack = $("li");
        $stack.each(function(index, element) {
            $(element)
                .delay(delayTime)
                .animate({ opacity: .3 }, 500)
                .animate({ opacity: 1 }, 500);
            delayTime += 1250;
        }).promise().done(function() {
            $stack.parent().append("<li>Hello!</li>");
        });
    });
</script>