I am trying to get this while loop to loop through a bunch of numbered divs with class numbers 1 through 4 one after another. Somewhere it is going awry. Thanks for your help!
var div = 1;
while (div < 5){
$("." + div).fadeIn().delay(4000).fadeOut(function(){
div++;
});
}
Increment div outside the fadeOut function.
See also this post for what CSS class names can look like, starting with a digit isn't one of them.
I'd consider using a single class name for the divs you want to apply this too rather than explicitly referencing each div.
Edit In that case, I'd create a collection of the divs separate from everything else. Pass that to a function that performs the operation on the first item in that list. In the fadeOut function, call the same function again, passing the rest of the list. Terminate by not calling the function when there are no more elements. Basically do it recursively.
The same thing could be done iteratively, I just think the recursive version is more intuitive.
You can to delay the fadeIn() incrementally:
HTML:
<div class="fade" style="display:none">Div 1</div>
<div class="fade" style="display:none">Div 2</div>
<div class="fade" style="display:none">Div 3</div>
<div class="fade" style="display:none">Div 4</div>
JavaScript:
$(".fade").each(function(i){
$(this).delay(4000 * i).fadeIn().delay(4000).fadeOut();
});
You can't have a DIV class start with a number. It should be something else.
If you want all div's that start with a specific classname, you can use this, but the will all do it on the same moment.:
$("[class^=fader]").fadeIn().delay(4000).fadeOut();
If you want to do it after eachother. Try this:
$("[class^=fader]").each(function(index){
$(this).delay(index * 4000).fadeIn().delay(4000).fadeOut();
});
You are incrementing the div inside fadeOut callback which will be executed only when the fadeOut completes, move it outsite. Try this
var div = 1;
while (div < 5){
$("." + div).fadeIn().delay(4000).fadeOut(function(){
});
div++;
}
Your div++ should not be called inside the anonymous function, but aside your function call, like this
var div = 1;
while (div < 5){
$("." + div).fadeIn().delay(4000).fadeOut();
div++;
}
Set in all divs you like to fade a class.
<div class="fadeClass">
// Select your divs
var divs = $("div#fadeClass");
// fade them all in/out
divs.each(function(index, value) {
$(this).fadeIn().delay(4000).fadeOut(function(){});
}
jQuery has a function called "each" that could come in handy for this one.
Here is a live example at jsfiddle: http://jsfiddle.net/XGSTP/
It seems Niels just posted a similar answer but I hope adding the jsFiddle helps.
In short, I wouldn't bother using numbered div's and i'm not sure if that's good practice anyways. Loop through the div's using "each":
var delayAmount = 1000; //amount of delay between each div.
$("div.fade").each(function(index){
$(this).show().delay(index * delayAmount).fadeOut();
});
