jQuery: Elemente nacheinander einfaden

yahooooo

Mitglied
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:

PHP:
	$("#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.

PHP:
$(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 
	)
});
 
Zuletzt bearbeitet:
Hi,

oder ohne zusätzliches PlugIn:
Code:
$(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
 
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.
 
Funktioniert soweit einwandfrei, aber bekommt man da auch noch einen callback eingebaut, wenn alle Bilder eingefadet sind?
 
so funkt das sehr gut ...

Code:
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;
	});
 
Zurück