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}

Comments

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

    can u upload demo?
    thanks

  4. User Avatar
    Guilllo
    Permalink to comment#

    It doesnt work on IE

  5. User Avatar
    Gordy
    Permalink to comment#

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

  6. User Avatar
    kia
    Permalink to comment#

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

    • User Avatar
      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. User Avatar
    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. User Avatar
    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();
    });

    • User Avatar
      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. User Avatar
    JCook
    Permalink to comment#

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

  10. User Avatar
    Aaryadev

    This is awesome
    its working in IE too

    thanks a lot

  11. User Avatar
    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. User Avatar
    Corey Ellis
    Permalink to comment#

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

    • User Avatar
      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. User Avatar
    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. User Avatar
    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.

    • User Avatar
      Thomas Lowe
      Permalink to comment#

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

  15. User Avatar
    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. User Avatar
    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. User Avatar
    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.

  18. User Avatar
    www.adaotokiralama.com
    Permalink to comment#
    <script>
      function example() {
        element.innerHTML = "<div>code</div>";
      }
    </script>
    
  19. User Avatar
    adaotokiralama.com
    Permalink to comment#

    function example() {
    element.innerHTML = “code”;
    }

    “`

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag