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有些浏览器不喜欢命名函数表达式。

jQuery循环函数似乎不起作用

2 个答案: