Total Novice here. I have some list items. I need to add a class of '.go' to each list item, one at a time, spaced out by pre-determined blocks of time. (each block of time will be different durations).
For instance:
- the script adds a '.go' class to the first (li)
- the '.go' class holds on that (li) for exactly 4.5 seconds.
- once the 4.5 seconds are up, the script removes the '.go' class from the current list item
- the script moves to the next (li) and adds a '.go' class
- the '.go' class holds on this (li) for 1.5 seconds.
- once the 1.5 seconds are up, the script removes the '.go' class from the current list item
- And then the cycle repeats, until it has cycled through all the list items
The script I have been working on does not function. It adds all the classes to the (li)'s instantly. And then they fadeout at different intervals. Rather I need the classes to BE ADDED at different intervals. Here's an example: http://jsfiddle.net/bM6uY/8/
<ul>
<li>hello</li>
<li>World!</li>
<li>Foo</li>
<li>Bar</li>
</ul>
$(function() {
$('ul li:nth-child(1)').addClass("go")
.delay(4500)
.queue(function() {
$(this).removeClass("go");
$(this).dequeue();
});
$('ul li:nth-child(2)').addClass("go")
.delay(1500)
.queue(function() {
$(this).removeClass("go");
$(this).dequeue();
});
$('ul li:nth-child(3)').addClass("go")
.delay(500)
.queue(function() {
$(this).removeClass("go");
$(this).dequeue();
});
$('ul li:nth-child(4)').addClass("go")
.delay(5000)
.queue(function() {
$(this).removeClass("go");
$(this).dequeue();
开发者_运维知识库 });
});
How about something like this:
$(function() {
var index = 0;
var length = $("ul").children().length;
var delays = [
500,
1500,
500,
5000
];
function delayNext()
{
setTimeout(function() {
$("ul li:eq(" + index + ")").addClass("go").siblings().removeClass("go");
index++;
if (index == length)
index = 0;
delayNext();
}, delays[index]);
}
delayNext();
});
http://jsfiddle.net/rfvgyhn/9VL4r/2/
I changed the the 4 queues to something like the following:
$('ul li:nth-child(1)').delay(4500)
.queue(function() {
$('ul li').removeClass( "go" );
$(this).addClass("go");
$(this).dequeue();
});
Here's the whole thing: http://jsfiddle.net/ChrisMH/bM6uY/18/
精彩评论