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/

Answer 2

替换

$("#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);
        });
    }
    loop();
});

我没有像@Yoshi那样使用函数表达式，因为AFAIK有些浏览器不喜欢命名函数表达式。