I would like to loop through a collection of divs and randomly fade them out when a click event is triggered but at the moment I have to continually click to fade the other divs all out. I would rather click a div and have all its divs randomly fade out. I have added some console.logs into the while loop and everything seems to work fine, problem is when I try to fadeout the actual elements. If anyone could help that would be great?
Fiddle here: http://jsfiddle.net/kyllle/sdpzJ/7/
I'm not sure if I understand your question, but here's a possible solution:
function randomFadeOut(i){
var random;
var e = 0;
while (e < ctnLength) {
random = Math.random() * 1000;
$(ctn[e]).not(i).delay(random).animate({ opacity : 0 });
e++;
}
}
This will fade out all the divs at random times when you click on one.
Your random number generator is outside of your loop - so you only get one random number over and over.
Try this:
function randomFadeOut(i){
var random
for (var e=0;e<ctnLength;e++) {
random = Math.floor(Math.random() * ctnLength);
$(ctn[random]).not(i).animate({ opacity : 0 });
}
}
Of course, since this is random, the same cells can be selected more than once, which will leave a number of cells behind.
Decided to throw this out there, too. Simplified.
$(function() {
var $ctn = $('#container .ctn');
function randomFadeOut() {
var $r = $ctn.not($(this));
var e = 0;
while (e < $ctn.length) {
$r.eq(e).delay(Math.random() * 500).animate({ opacity: 0 });
e++;
}
}
$ctn.hide().click(randomFadeOut).each(function(v) {
$(this).delay(50 * v).fadeIn();
});
});
Here is a better and more efficient randomFade function:
function randomFadeOut(i){
var tmp = ctn.toArray();
tmp.sort( function(){ return Math.floor( Math.random()*3 ) -1; } );
for( var i=0; i<tmp.length; ++i ){
$(tmp[i]).delay(100 * i).fadeOut();
}
}
This way, you only go once through the array I updated your fiddle with it as well to see it in action :)
