CODEWITHSUNDEEP
jqueryjquery-animatequeue
Zach
Zach

Reputation: 1185

queue animation after last in .each function

I'm running through a list of animations like so:

function katz_logo() {
    $('#logo')
    .delay(500)
    .animate({opacity: 1}, 1000)
    .queue(katz_subsites);
}

function katz_subsites() {
    var subsites = $('#subsites li'),
        subsitesLength = subsites.length;

    subsites.each(function(i) {
        $(this)
        .delay(i * 300)
        .animate({top:0, opacity: 1 }, 800);

        if (i === subsitesLength - 1) {
            alert('hi');
        }

    });
}

function katz_video() {
    if (!Modernizr.touch) {
        $('#home_video').delay(500).fadeIn(1000);
    }
}

katz_logo();

Each animation is defined as a function and then ultimately called with katz_logo() to start the magic. In the katz_subsites() function, I am looping through each li available and then what I'm trying to do is queue the katz_video() function after the last element is reached, but even my experiment with an alert is not working as expected.

So - the portion I'm having trouble with is how to grab that last value (which I swear I've been following the other answers on here for) and then how to then queue something after that is reached.

Any help would be greatly appreciated. Thanks!

Update

Progress on code - still stuck on targeting that last element in the each() statement and then queueing the next animation:

function katz_logo() {
    $('#logo')
    .delay(500)
    .animate({opacity: 1}, 1000, katz_subsites);
}

function katz_subsites() {
    var subsites = $('#subsites li'),
        subsitesLength = subsites.length;

    subsites.each(function(i) {
        $(this)
        .delay(i * 300)
        .animate({top:0, opacity: 1 }, 800);

        if (i === subsitesLength - 1) {
            i.queue(katz_video);
        }

    });
}

function katz_video() {
    if (!Modernizr.touch) {
        $('#home_video').delay(500).fadeIn(1000);
    }
}

katz_logo();

Working code:

function katz_logo() {
    $('#logo')
    .delay(500)
    .animate({opacity: 1}, 1000, katz_subsites);
}

function katz_subsites() {
    var subsites = $('#subsites li'),
        subsitesLength = subsites.length;

    subsites.each(function(i) {
        $(this)
        .delay(i * 300)
        .animate({top:0, opacity: 1 }, 800, (i===subsitesLength-1 ? katz_video : (function(){})) );
    });
}

function katz_video() {
    if (!Modernizr.touch) {
        $('#home_video').delay(500).fadeIn(1000);
    }
}

katz_logo();

Upvotes: 0

Views: 157

Answers (1)

Emissary
Emissary

Reputation: 10148

I think you are miss-using the queue function, rather what you are looking for is to add a callback which the animate function executes on completion.

$('#logo')
  .delay(500)
  .animate({opacity: 1}, 1000, katz_subsites);

EDIT in response to comment - again, same principle.
Looking at your code, something along the lines of:

subsites.each(function(i) {
  $(this)
    .delay(i * 300)
    .animate({top:0, opacity: 1 }, 800, 
      (i===subsitesLength-1 ? katz_video : (function(){})) );
});

Upvotes: 1

Related Questions