Code Snippet

Home » Code Snippets » jQuery » Cycle Through a List

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

Subscribe to The Thread

  1. Dan Taylor

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

    Reply ↓
  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>

    Reply ↓
  3. toplu email

    can u upload demo?
    thanks

    Reply ↓
  4. Guilllo

    It doesnt work on IE

    Reply ↓
  5. Gordy

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

    Reply ↓
  6. kia

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

    Reply ↓
  7. David Elam

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

    Reply ↓
  8. David Elam

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

    Reply ↓
    • supra

      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

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

    Reply ↓
  10. Aaryadev

    This is awesome
    its working in IE too

    thanks a lot

    Reply ↓

Speak, my friend

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
~ The Management ~