Grow your CSS skills. Land your dream job.

Last updated on:

Cycle Through a List

This code will cycle through an unordered list with an ID of 'cyclelist'. Can be used on any element with children. Replace "ul#cyclelist li" with the elements you want to cycle through.

$(document).ready(function() {

	 var j = 0;
	 var delay = 2000; //millisecond delay between cycles
	 function cycleThru(){
	         var jmax = $("ul#cyclelist li").length -1;
	         $("ul#cyclelist li:eq(" + j + ")")
	                 .animate({"opacity" : "1"} ,400)
	                 .animate({"opacity" : "1"}, delay)
	                 .animate({"opacity" : "0"}, 400, function(){
	                         (j == jmax) ? j=0 : j++;
	                         cycleThru();
	                 });
	         };

	 cycleThru();

 });
ul#cyclelist {width:200px;border:solid;position:relative;overflow:hidden;height:200px}
ul#cyclelist li {font-size:1.4em;padding:20px;opacity:0;position:absolute}

Reference URL

Comments

  1. Is it possible to make the list item active links? As is when you make them links nothing happens, why is that?

  2. Ant

    Note that it’s better to use $(“ul#cyclelist > li”) selector, because there maybe nested lists.

    @Dan Taylor. Sure, why not? Use <li><a href=”#.”>Link</a></li>

  3. can u upload demo?
    thanks

  4. Permalink to comment#

    It doesnt work on IE

  5. Gordy
    Permalink to comment#

    Yeah it doesn’t behave correctly in IE unfortunately..

  6. kia
    Permalink to comment#

    is it possible to pause the action when another event happens.
    for example pause in mouse over
    thanks

    • Permalink to comment#

      I’m sure you’ve solved your problem in the years since you made this post, but I thought other would appreciate a good, solid answer. Just know that this is very different than the code up above in order to use intervals.

      $(document).ready(function() {

      $("#cyclelist li:first-child").addClass("first active"); // Give classes first and active to the first li
      $("#cyclelist li:last-child").addClass("last"); // Give class last to the last li
      $("#cyclelist .active").fadeIn(400);
      
      var timeSet = 3; //Second delay between cycles
      var timeDelay = timeSet * 1000; 
      
      var cycleThru = function (){
          if($(".last").is(":visible")){
              $("#cyclelist .active").removeClass("active");
              $("#cyclelist .first").addClass("active");
              $("#cyclelist li:visible").fadeOut(400, function(){
                  $(".active").fadeIn(400);
                  });
      }else{
          if($("#cyclelist .active").is(":visible")){
              $("#cyclelist .active").removeClass("active");
              $("#cyclelist li:visible").next("li").addClass("active");
              $(".active").prev("li").fadeOut(400, function(){
                  $(".active").fadeIn(400);
                  });
          }
      }
      };
      
      var cycleInterval = setInterval(function () {
          cycleThru();
      }, timeDelay);
      
      cycleInterval;
      
      
      // This will stop the cycling when the mouse enters cyclelist
      
      $("#cyclelist").mouseenter(function(){
          clearInterval(cycleInterval); 
       });
      
      //This will start the cycling when the mouse leaves cyclelist
      
      $("#cyclelist").mouseleave(function(){
              cycleInterval = setInterval(function () {
              cycleThru();
          }, timeDelay);
       });
      
      });
      
  7. David Elam
    Permalink to comment#

    .animate({“opacity” : “0”}, 400, function(){
    (j == jmax) ? j=0 : j++;
    cycleThru();
    });
    to

    .animate({“opacity” : “0”}, 400, function(){
    $(“ul#cyclelist li”).hide();
    (j == jmax) ? j=0 : j++;
    cycleThru();
    });

  8. David Elam
    Permalink to comment#

    Sorry for the double post… to fix IE, change

    .animate({“opacity” : “0″}, 400, function(){
    (j == jmax) ? j=0 : j++;
    cycleThru();
    });

    to

    .animate({“opacity” : “0″}, 400, function(){
    $(“ul#cyclelist li”).hide();
    (j == jmax) ? j=0 : j++;
    cycleThru();
    });

    • supra
      Permalink to comment#

      The IE fix doesnt seem to work

      heres what i tried

      (function($) {

      $.cycleThru = {
      defaults: {
      delay: 1,

      }
      }
      $.fn.extend({
      cycleThru:function(config) {
      var config = $.extend({}, $.cycleThru.defaults, config);
      return this.each(function() {
      var delay = config.delay;
      var ulid = $(this).attr(“id”);
      var j = 0;
      var jmax = $(this).children(“li”).length -1;

      function cyclee(){
      $(“ul#” + ulid + ” li:eq(” + j + “)”)
      .animate({“opacity” : “1”} ,200)
      .animate({“opacity” : “1”}, delay)

      .animate({“opacity” : “0”}, 400, function(){
      $(“ul#cycleThru_qoutes li”).hide();
      (j == jmax) ? j=0 : j++;
      cycleThru();

      });
      };
      cyclee();
      })
      }
      })
      })(jQuery);

  9. JCook
    Permalink to comment#

    Doesn’t seem to work in IE. Save yourself hours by skipping this and using the Cycle Plugin instead.

  10. This is awesome
    its working in IE too

    thanks a lot

  11. swift
    Permalink to comment#

    instead delaying by animating opacity from 1 to 1 correctly to use .delay( 2000 ) method inclusion:

    *

    $(document).ready(function() {
        var j = 0;  
        var inbetween = 2000;  //milliseconds   
        function cycleThru(){
            var jmax = $("ul#cyclelist li").length -1;
            $("ul#cyclelist li:eq(" + j + ")")
                .animate({"opacity" : "1"} ,400)
                .delay( inbetween )
                .animate({"opacity" : "0"}, 400, function(){
                    (j == jmax) ? j=0 : j++;
                    cycleThru();
                });
            };
        cycleThru();
     });
    

    *

  12. Corey Ellis
    Permalink to comment#

    Does anyone have any suggestions on how to randomize this? (jquery newbie)

    • Corey,

      I haven’t tried this, and I’m sure someone here could elaborate.
      cycleThru would be a different function:
      In your list you could give each ‘li> item a sequential number. At the start of the function, set a variable to a random number within your list range. Then use this variable in the jquery portion already outlined. It would look something like this:

      $(document).ready(function() {
      var j = 0;  
      var inbetween = 2000;  //milliseconds   
      function cycleThru(){
          $("#"+j)
              .animate({"opacity" : "1"} ,400)
              .delay( inbetween )
              .animate({"opacity" : "0"}, 400, function(){
                  j = ; //<--randomizing the variable goes here*/
                  cycleThru();
              });
          };
      cycleThru();
      

      });

  13. Dan
    Permalink to comment#

    Hi. I need this cycle to stop after it iterates through all elements and then show a messege like “started” or w/e the messege. ?Anyone ?

  14. Thomas Lowe
    Permalink to comment#

    This code is working perfect for me except I need one change. I want the list be to vertically centered. Like this

        text
    

    texttext
    texttexttext

    I can remove the “position: absolute;” to accomplish that but then each successive line of text moves down a line when it fades in.

    Anyone know how to do this? Thanks.

    • Thomas Lowe
      Permalink to comment#

      Ooops that did not display right. I wan the text to justified-center.

  15. Permalink to comment#

    Found that using FadeIn and FadeOut is a lot easier than using opacity.

    I simply hated having to put a static height on the list item. So instead of setting the list item as absolute, just put display none on it and FadeIn and FadeOut will simply toggle the display element and fade it.

        $(document).ready(function() {
    
        var j = 0;
        var delay = 2000; //millisecond delay between cycles
        function cycleThru(){
             var jmax = $("#footer .clients-list li").length -1;
             $("#footer .clients-list li:eq(" + j + ")")
                     .fadeIn(400)
                     .delay(delay)
                     .fadeOut(400, function(){
                             (j == jmax) ? j=0 : j++;
                             cycleThru();
                     });
             };
    
        cycleThru();
    
    });
    
  16. David
    Permalink to comment#

    What’s the best way to make this repeat; begin iterating again at the start of the list once completed?

  17. Virendra
    Permalink to comment#

    IS it possible to dynamic rotation time depend on text length?
    If text length is small then time will small and if long then time will be longer.

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like ```this```. You don't need to escape code in backticks, Markdown does that for you.

Sadly, it's kind of broken. WordPress only accepts a subset of HTML in comments, which makes sense, because certainly some HTML can't be allowed, like <script> tags. But this stripping happens before the comment is processed by Markdown (via Jetpack). It seems to me that would be reversed, because after Markdown processes code in backticks, it's escaped, thus safe. If you think you can fix this issue, get in touch!

If you need to make sure the code (typically HTML) you post absolutely posts correctly, escape it and put it within <pre><code> tags.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".