[Solved] Replay jQuery function every 5 seconds

Question

Ok, I am going to go out on a limb and make several assumptions here; one is that you wish to cycle between two elements repeatedly, another is that you are using $(this) in the context of the window rather than a containing element. If either of these are incorrect then the following solution may not be suitable. However, let’s give this a shot, eh?

1) You need to use setInterval rather than setTimeout to create a repeating call. You can of course “chain” your timeouts (ie: call the succeeding timeout from the code of the current timeout). This has some benefits in certain situations, but for now let’s just assume you will use intervals rather than timeouts.

2) You call the find() jQuery method every time, which is a little unnecessary, especially if you will be repeating the actions so one idea would be to cache the lookup. If you are going to do that a custom object would be more suitable than separate global variables.

3) Some flexibility in terms of starting and stopping the animation could be provided. If we use a custom object as mentioned in (2) then that can easily be added.

4) You are using fadeIn and fadeOut, however if you wish the items to cycle then fadeToggle may be your best solution as it will simply allow you to do exactly that, toggle, without needing to check the current opacity state of the element.

5) Finally in my example I have provided a little extra “padding HTML” in order for the example to look good when run. Fading in jQuery will actually set the faded item to a CSS display of “none” which results in the content “jumping about” in this demo, so I have used some div’s and a couple of HTML entity spaces to keep the formatting.

Ok, after all that here is the code..

// your custom animation object
var myAnim = {
  // these will be cached variables used in the animation
  elements : null,
  interval : null,
  // default values for fading and anim delays are set to allow them to be optional
  delay : { fade: 500, anim: 200 },
  // call the init() function in order to set the variables and trigger the animation
  init : function(classNameOne, classNameTwo, fadeDelay, animDelay) {
    this.elements = [$("."+classNameOne),$("."+classNameTwo)];
    // if no fade and animation delays are provided (or if they are 0) the default ones are used
    if (animDelay) this.delay.anim = animDelay;
    if (fadeDelay) this.delay.fade= fadeDelay;
    this.elements[0].fadeOut(function(){myAnim.start()});
  },
  // this is where the actual toggling happens, it uses the fadeToggle callback function to fade in/out one element once the previous fade has completed
  update : function() {
    this.elements[0].fadeToggle(this.delay.anim,function(el,delay){el.fadeToggle(delay)}(this.elements[1],this.delay.anim));
  },
  // the start() method allows you to (re)start the animation
  start : function() {
    if (this.interval) return; // do nothing if the animation is currently running
    this.interval = setInterval(function(){myAnim.update()},this.delay.fade);
  },
  // and as you would expect the stop() stops it.
  stop : function () {
    if (!this.interval) return; // do nothing if the animation had already stopped
    clearInterval(this.interval);
    this.interval = null;
  }
}

// this is the jQuery hook in order to run the animation the moment the document is ready
$(document).ready(
  function(){
    // the first two parameters are the two classnames of the elements
    // the last two parameters are the delay between the animation repeating and the time taken for each animation (fade) to happen. The first one should always be bigger
    myAnim.init("admin-stats-big-figures","admin-stats-big-figures-hidden",500,200);
  }
);

OK, so now we need the HTML to compliment this (as I say I have added a little formatting):

<div><span class="admin-stats-big-figures">One</span> &nbsp; </div>
<div><span class="admin-stats-big-figures-hidden">Two</span> &nbsp; </div>
<hr/>
<input type="button" value="Start" onclick="myAnim.start()"/> | <input type="button" value="Stop" onclick="myAnim.stop()"/>

I have also provided buttons to stop/start the animation. You can see a working example at this JSFiddle – although the stop/start buttons are not working (presumably something specific to JSFiddle) they do work when in context though.

Accepted Answer