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}
Is it possible to make the list item active links? As is when you make them links nothing happens, why is that?
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>
can u upload demo?
thanks
It doesnt work on IE
Yeah it doesn’t behave correctly in IE unfortunately..
is it possible to pause the action when another event happens.
for example pause in mouse over
thanks
.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();
});
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();
});
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);
Doesn’t seem to work in IE. Save yourself hours by skipping this and using the Cycle Plugin instead.
This is awesome
its working in IE too
thanks a lot
instead delaying by animating opacity from 1 to 1 correctly to use
.delay( 2000 )method inclusion:*
*
Does anyone have any suggestions on how to randomize this? (jquery newbie)
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 ?