Yeah, the for loop will not wait for whatever it is executing, lets try
something a bit different.
You will need to store the elements in an array.
total = 0;
elements = new Array();
$("body").find("div.class").each(function(elem){
elements[elem] = $(this).attr("id");
total++
});
i = 0;
function rndAnim() {
if ( i <= total) {
$("#"+elements[i]).animate({opacity: 1});
i++
setTimeout(rndAnim,2000);
}
}
rndAnim();
So, each element's id will be stored in the array, when the rndAnim
function is run, it fades in the first element, and increases i then
after 2 seconds, will run the function again, fading in the next element
in the array, and will only do this as long as 'i' is less then the
total amount of elements.
this will need some cleaning up by yourself, but I do think it will work.
ryan.j wrote:
i had a look at your method last night, and i ran into the same
problems i did trying to use setTimeout and $arr.each() to iterate the
func. If i do...
for (i=1; i<=$arr.length; i++) {
var tmp = self.setInterval( "rndAnim("+i+")" , 2000 );
}
...then [ i ] instances of rndAnim execute simultaneously after
2000ms, and whilst this repeats with setInterval where setTimeout
doesn't, all [ i ] rndAnim() always happen simultaniously so i can't
stack up a chain of animations.
On Sep 22, 4:31 pm, Liam Potter <radioactiv...@gmail.com> wrote:
ahh, didn't know you had id's already assigned, you could use the data
method to store it in the dom rather then in the id?
ryan.j wrote:
cheers for that liam,
i'd thought about assigning incremental ids on the fly since i'm
already using the element's id to select them in the slab'o'crap being
eval'd, but afaik xhtml elements can only have one attrib type ID
can't they? since it's just a fluffy graphical thing i don't really
want to grab all the id attribs that might be being used elsewhere but
it me thinking, i could just assign classed like .bigUniqueString_1
and just strip out the last character for comparison.
will have a fiddle around with that.
On Sep 22, 3:50 pm, Liam Potter <radioactiv...@gmail.com> wrote:
I'd count how many elements have the class, and also add an id to each
one, incrementing with each count.
Then I would write a function, passing it a randomly generated number
(within range of the element count) which would fade in the given id,
with a known animation time.
I would then use setInterval to run the function, and give it the same
time as the fade animation will take.
Could how many times this is ran and once it reaches the amount of
elements, end it.
This may also not the best way to do it, but it's better then nested
callbacks.
ryan.j wrote:
Hi guys, been playing around with something for a bit this afternoon
but i can't find a programatically 'nice' way of achieving the effect
i'm after.
I have a bunch of elements assigned a class that don't necessarily
have anything in common beyond the class. I want to fadeto them in
randomly but in-turn, as if i was chaining animation effects for
example.
http://jsbin.com/exepi
the only way i've been able to do this so far is by building and
evaluating a slab of nested callbacks which works but is pretty
horrible in almost every way. I think i'm missing something fairly
obvious here, you guys have any thoughts?
