队列动画。每个功能

Question

我通过动画列表运行，像这样：

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(); 

每个动画被定义为一个函数，然后最终与katz_logo()调用来启动的魔力。在katz_subsites()函数中，我遍历每个可用的li，然后我要做的是在达到最后一个元素后排队katz_video()函数，但即使我的警报实验没有按预期工作。

所以 - 我遇到麻烦的部分是如何获取最后一个值（我发誓我一直在遵循这里的其他答案），然后如何在达到该值后对队列进行排队。

任何帮助将不胜感激。谢谢！

更新

的代码进展 - 仍然停留在在each()声明针对的是最后一个元素，然后排队下一个动画：

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(); 

工作代码：

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(); 

Answer 1

我想你错过了使用queue函数，而你正在寻找的是添加一个回调，其中的动画函数n在完成时执行。

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

编辑回应评论 - 同样的原则。
看你的代码，沿着线的东西：

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