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
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() {
.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)
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:
});
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 ?
This code is working perfect for me except I need one change. I want the list be to vertically centered. Like this
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.
Ooops that did not display right. I wan the text to justified-center.
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.
What’s the best way to make this repeat; begin iterating again at the start of the list once completed?
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.
function example() {
element.innerHTML = “code”;
}
“`