treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Cycle Through a List

Last updated on:

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

View Comments

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)

  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 ?

Leave a Comment

Use markdown or basic HTML and be nice.