延迟遍历元素

Question

Currently I'm trying to loop through a series of divs and sequentially hide the currently displayed, then delay 6 seconds, then display the next one in the series.

I have this working but I feel it's clunky and could be a lot better, also the sequence is going out of sync with each other, why is this?

jQuery(document).ready(function($) {

var divs = $('div[id^="content-"]').hide(),
    i = 0;

(function cycle() { 

    divs.eq(i).show(0)
              .delay(6000)
              .hide(0, cycle);

    i = ++i % divs.length;

})();

});


jQuery(document).ready(function($) {

var divs = $('a[id^="title-"]').hide(),
    i = 0;

(function cycle() { 

    divs.eq(i).show(0)
              .delay(6000)
              .hide(0, cycle);

    i = ++i % divs.length;

})();

});

Could this be a lot better and be in sync? Or is this something I will have to live with?

Any help is greatly appreciated!

Answer 1

Edit, Updated

$(function() {
      // set `jQuery.fx.interval` to `0`
      $.fx.interval = 0;
      // elements `content` , `title`
      var content = $("div[id^=content-]")
      , title = $("div[id^=title-]")
      // delay between `.show()` and `.hide()`
      , delay = 6000;
      // hide elements
      content.add(title).hide(0);
      // call `cycler` with `element` , `delay` arguments
      var cycler = function(el, t) {
        // return named iife `cycle` with `element` , `i` index arguments 
        return (function cycle(elem, i) {
          // show `elem` at `i` index
          // return `elem`
          return elem.eq(i).show({duration:0, easing:"linear"})
            // `delay` `t`
            .delay(t)
            // hide `elem` at `i` index
            .hide({duration:0, easing:"linear", complete:function() {
              // increment `i` 
              i = ++i % elem.length;
              // call `cycle` recursively
              cycle(elem, i);
            }});
        }(el, 0));
      };
      // call `cycler` utilizing `$.when()` for ability to process
      // returned `content` , `title` items at `.done()` , `.then()` callbacks
      $.when(cycler(content, delay + 1), cycler(title, delay))
    });

 $(function() { $.fx.interval = 0; var content = $("div[id^=content-]"), title = $("div[id^=title-]"), delay = 6000; content.add(title).hide(0) var cycler = function(el, t) { return (function cycle(elem, i) { return elem.eq(i).show({duration:0, easing:"linear"}) .delay(t) .hide({duration:0, easing:"linear", complete:function() { i = ++i % elem.length; cycle(elem, i); }}); }(el, 0)); }; $.when(cycler(content, delay + 1), cycler(title, delay)) }); 

 div { width : 50px; height : 50px; } div:nth-of-type(1), div:nth-of-type(7) { background : blue; } div:nth-of-type(2), div:nth-of-type(8) { background : red; } div:nth-of-type(3), div:nth-of-type(9) { background : green; } div:nth-of-type(4), div:nth-of-type(10) { background : orange; } div:nth-of-type(5), div:nth-of-type(11) { background : pink; } div:nth-of-type(6), div:nth-of-type(12) { background : purple; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="content-1"></div> <div id="content-2"></div> <div id="content-3"></div> <div id="content-4"></div> <div id="content-5"></div> <div id="content-6"></div> <br /> <div id="title-1"></div> <div id="title-2"></div> <div id="title-3"></div> <div id="title-4"></div> <div id="title-5"></div> <div id="title-6"></div>