jQuery 循环函数似乎不起作用

Question

我遇到了 div 淡入 HTML/jQuery 演示文稿第 12 幻灯片页面的问题。

运行以下代码时，div 将淡入，但不会跟随调用循环的函数并重复自身。它应该连续循环地褪色到 50% 不透明度，然后又恢复到 100%。

我相当有信心问题出在我的语法上，但我还没有运气。

jQuery:

// if slide 12
if (index == 11) {
    $("#prev").show();
    $("#next").show();
    $("#p12-1").delay(2000).fadeIn("slow", function() {
        function loop() {
            $("#p12-1").delay(200).fadeTo("slow", 0.5, function ()  {
                $("#p12-1").delay(200).fadeTo("slow", 1, loop);
            });
        };
    });
    createParticles($("#main").offset().left + 200, $("#main").offset().top + 100, 4000);
}

HTML:

<div class="main-slide main-slide-12" style="display:none;">
<div id="p12-1" style="display:none;"><img src="images/p12-1.png" /></div>
<div style="display:none;" id="p12-2"><img src="images/p12-2.png" /></div>
<div style="display:none;" id="p12-3"><img src="images/p12-3.png" /></div>

Answer 1

更改:

$("#p12-1").delay(2000).fadeIn("slow", function() {
    function loop() {
        $("#p12-1").delay(200).fadeTo("slow", 0.5, function ()  {
            $("#p12-1").delay(200).fadeTo("slow", 1, loop);
        });
    };
});

至:

$("#p12-1").delay(2000).fadeIn("slow", function() {
    (function loop() {
        $("#p12-1").delay(200).fadeTo("slow", 0.5, function ()  {
            $("#p12-1").delay(200).fadeTo("slow", 1, loop);
        });
    }());
});

小更新:

一般来说，不需要使用 oncomplete-callback 对相同元素上的动画进行排队。也就是说，您也可以使用这样的代码，具有相同的效果(请注意，您可以根据需要链接任意数量的动画和延迟，并且仅使用 fade 作为最后一个完成回调来启动结束):

(function fade () {
  $('#p12-1')
  .delay(2000)
  .fadeIn('slow')
  .delay(2000)
  .fadeOut('slow', fade);
}());

演示:http://jsfiddle.net/TPBFt/