Treehouse: 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. Dan Taylor
    Permalink to comment#

    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. toplu email
    Permalink to comment#

    can u upload demo?
    thanks

  4. Guilllo
    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

    • Noah
      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. Aaryadev

    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)

    • Adam Mirkovich
      Permalink to comment#

      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. Alex Howes
    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

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```