Question

This is my first time building a loop in jQuery or js, and I’ve gotten myself over my head.

I have a piece of content that needs to loop on page load:

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

At a regular interval to go down the following functions (swapping text out), and then once the loop reaches the last function, to return to the top and start it all over again.

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

I know I need to use setInterval, define a variable, and create a function here somehow, but honestly I’m lost as to how the pieces go together.

My gut level guess is that even this is a rather clunky way of achieving this, and there’s likely a method of defining the .text terms as variables in an array as to avoid the multiple .fadeOuts and .fadeIns.

Could sure use some help here.

Answer 1

You are not doing this correctly. You don’t want setInterval here.

The first thing you need to know is that the way your wrote it, all of these command will run simultaneously meaning you will be fading in and out at the same time (which is going to look odd). When you chain command they don’t wait – they all run at the same time. Instead you use the callback feature, when each animation is done it calls the callback which does the next step.

Change it to this:

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

The fader function does each step of the animation. Then when the final animation is done it calls the function passed in as next to continue the loop.

Then I setup a bunch of functions to define the sequence (I’m sure there are other ways to do this – an array perhaps, but this was the first that came to mind).

PS. I didn’t test this, there may be typos.