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

  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();
    
    });
    

Leave a Comment

Current day month ye@r *

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