Question

这是我第一次在jQuery或js中构建一个循环，我已经把自己放在了脑后。

我有一段需要在页面加载时循环的内容：

<li id="nav_about"><a href="">Loren ipsum <span id="adjective">1</span></a>
</li>

定期按下列功能（交换文本），然后一旦循环到达最后一个函数，返回到顶部并重新开始。

{$("#adjective").fadeOut(500).delay(100).text("2").fadeIn(500);}
{$("#adjective").fadeOut(500).delay(100).text("3").fadeIn(500);}
{$("#adjective").fadeOut(500).delay(100).text("4").fadeIn(500);}
{$("#adjective").fadeOut(500).delay(100).text("1").fadeIn(500);}

我知道我需要使用setInterval，定义一个变量，并以某种方式在这里创建一个函数，但老实说，我已经迷失了这些碎片是如何组合在一起的。

我的直觉水平猜测即使这是一种相当笨重的方法来实现这一点，并且可能有一种方法将.text术语定义为数组中的变量，以避免多个.fadeOuts和.fadeIns。

可以肯定在这里使用一些帮助。

Answer 1

这是一种做你想做的事情的方式。

http://jsfiddle.net/bryanjamesross/kdbYk/

你的直觉是正确的。但是，请注意我必须在淡出时使用回调。这是必需的，因为出于某种原因，将text()调用放入链中会导致它等到所有动画完成后再更改文本。

Answer 2

你没有正确地这样做。你不想在这里使用setInterval。

您需要知道的第一件事是您编写它的方式，所有这些命令将同时运行意味着您将同时淡入淡出（这将是看起来奇）。当你链接命令他们不等待 - 他们都在同一时间运行。相反，您使用回调功能，当每个动画完成后，它会调用回调，然后执行下一步。

将其更改为：

function fader(text, next) {
  $("#adjective").fadeOut(500, function() {
    $(this).text(text).delay(100).fadeIn(500, function() {
      next();
    });
  });
}

function fader2() { fader('2', fader3); }
function fader3() { fader('3', fader4); }
function fader4() { fader('4', fader1); }
function fader1() { fader('1', fader2); }

fader2();

推子功能执行动画的每一步。然后，当完成最后一个动画时，它会调用传入的函数作为下一个继续循环。

然后我设置了一堆函数来定义序列（我确定还有其他方法可以做到这一点 - 也许是一个数组，但这是我想到的第一个。）

PS。我没有测试过，可能会有拼写错误。

Answer 3

你要做的第一件事就是把它分解成几部分。而不是在自动循环上首先完成使函数首先工作的工作，然后在循环中调用它。

首先让这个功能起作用：

function myLoop(){ 
  var max = 4
  var min = 0
  // find the element and decrement it's value
  // if the element's value is below the minimum, set it to the maximum
}

并将其执行挂钩到按下按钮：

$("#myButton").live("click", myLoop);

然后当按下每个按钮使功能正常工作时，让它在定时循环中运行：

setInterval(myLoop, /*time in milliseconds*/)

Answer 4

此处您不需要setInterval。您可以运行序列，然后在前一个序列完成时开始下一个序列。

这是使用完成函数在动画结束后启动下一个操作的一种方法。你可以在这里看到它：http://jsfiddle.net/jfriend00/PTZXV/。

代码是这样的：

function cycle(cntr) {
    if (cntr > 4) { cntr = 1; }
    var o = $("#adjective");
    o.fadeOut(500, function() {
        o.text(cntr + "").delay(100).fadeIn(500, function() {
            cycle(++cntr);
        });
    });
}

cycle(2);

仅供参考，你不能使用这样的序列：

$("#adjective").fadeOut(500).delay(100).text("2").fadeIn(500);

delay(100)方法仅适用于fx动画队列中的方法，而.text("2")操作不使用fx动画队列，因此不会使用其他操作对其进行正确排序。这就是我必须在.text()方法之前和之后使用完成函数的原因。

编辑：要使操作通过动画队列（因此它将尊重.delay()方法和动画队列中的其他排序），可以使用.queue()方法。你可以这样做：

function cycle(cntr) {
    if (cntr > 4) { cntr = 1; }
    var o = $("#adjective");
    o.fadeOut(500)
        .queue(function(next) {o.text(cntr + ""); next();})
        .delay(100)
        .fadeIn(500, function() {cycle(++cntr);});
}

cycle(2);

您可以在此处看到：http://jsfiddle.net/jfriend00/mkyTQ/。

jQuery setInterval循环

4 个答案: