0

我正在浏览一个动画列表，如下所示：

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

1 回答 1

1

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

$('#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(){})) );
});
于 2012-11-15T15:22:35.420 回答