✔ jQuery: Elemente nacheinander einfaden

[yahooooo]

Hi,
ich bin noch neu, was jQuery betrifft. Man verzeihe mir bitte die Anfängerfrage. Folgendes Problem:

Ich habe eine Punkteliste mit Elementen. Die Elemente will ich zunächst unsichtbar haben und sobald die Seite dann Ready ist, nacheinander einblenden bzw. einfaden. Folgender Ansatz funktioniert jedenfalls nicht:

	$("#items li").each(function(e){
		as = setTimeout($(this).fadeIn("500"), 10000);
	});

Mir ist halbwegs klar, wieso das nicht klappt, aber ich weiß nicht, wie ichs besser machen soll. Über sachdienliche Hinweise würde ich mich freuen.

/edit: bin doch noch fündig geworden in der Mailingliste.

$(document).ready(function(){
	$('#items li').each(function(e){
		$(this).hide();
	});
	$('#items li').asyncEach( 
		function(){ $(this).fadeIn(); }, //each callback, return false to stop it 
		function(i){ return 20*i; },       //duration of the next delay, this can a number too 
		function(){ 
		//alert('finished'); 
		}  //complete callback 
	)
});

 

[Quaese]

Hi,

oder ohne zusätzliches PlugIn:

$(document).ready(function(){
  var intTime = 0;
  $('#items li').each(function(i){
    var _this = this;
    window.setTimeout(function(){$(_this).fadeIn('100');}, intTime);
    intTime += 1000;
  });
})

Ciao
Quaese

 

[yahooooo]

Danke. So gehts natürlich auch, und so hätte ich es wohl auch als nächstes versucht, wenn ich nicht zwischenzeitlich auf die andere Lösung gestoßen wäre.

 

[_KI]

Funktioniert soweit einwandfrei, aber bekommt man da auch noch einen callback eingebaut, wenn alle Bilder eingefadet sind?

 

[_KI]

so funkt das sehr gut ...

var intTime = 900;
  	var length = $('#page img').length;
  	$('#page img').each(function(i){
    	var _this = this;
    	window.setTimeout(function(){$(_this).fadeTo('slow',1.0);}, intTime);
    	if(i == length -1)
  	{
		window.setTimeout( function(){ 
		
		// Hover
		$("#content img").hover(function(){$(this).fadeTo("fast", 0.7);},function () {$(this).fadeTo("fast", 1.0);});
		//alert('finished'); 
		
		} , intTime + 100);
  	}
    	intTime += 150;
	});