jQuery functie herhalen

[peps03]

Hoi,

Ik gebruik deze functie om een aantal divjes in en uit te faden. Maar hoe herhaal ik deze functie?

<script>
$(document).ready(
function repeat(){
$("#banner1").hide().fadeIn(1000).delay(3500).fadeOut(500),
$("#banner2").hide().delay(5000).fadeIn(1000),
$("#banner2").delay(3500).fadeOut(500),
$("#banner3").hide().delay(10000).fadeIn(1000),
$("#banner3").delay(3500).fadeOut(500),
$("#banner4").hide().delay(15000).fadeIn(1000),
$("#banner4").delay(3500).fadeOut(500),
$("#banner5").hide().delay(20000).fadeIn(1000),
$("#banner5").delay(3500).fadeOut(500);

});
</script>

Alvast bedankt!

 

[ErikBooy007]

Twee mogelijkheden:

1. Geef je div's allemaal dezelfde class aan de hand waarvan je ze kunt identificeren, dan kun je dit doen:

[JS]
$(document).ready(function(){

$('.class_die_je_aan_elk_gewenst_element_toevoegt').each(function(){

$(this).hide().fadeIn(1000).delay(3500).fadeOut(500);

});

});
[/JS]

2: een for loopje gebruiken:

[JS]
for ( var i = 1; i <= 5; i++ ) {

$("#banner" + i).hide().fadeIn(1000).delay(3500).fadeOut(500);

}

[/JS]

[EDIT]
Ik zie nu dat je verschillende timings gebruikt. Ik ga me er even op bezinnen hoe je dat erin zou kunnen toepassen.
[/EDIT]

 

[peps03]

Hoi ErikBooy007, dank voor je reactie!

Die timing die je had zijn wel goed hoor:
.fadeIn(1000).delay(3500).fadeOut(500);

alleen doen beide opties het niet, ze laten alleen de eerste div zien.

de class die alle div's hebben - banner.

ik heb dit geprobeerd:
<script>
for ( var i = 1; i <= 5; i++ ) {

$("#banner" + i).hide().fadeIn(1000).delay(3500).fadeOut(500);

}
</script>

en dit:



<script>
$(document).ready(function(){

$('.banner').each(function(){

$(this).hide().fadeIn(1000).delay(3500).fadeOut(500);

});

});</script>

 

[peps03]

weet je wat ik fout doe ErikBooy007?

 

[peps03]

****bump***

 

[Tarabass]

Zoals in css maakt jquery onderscheidt in classes en id's van div's. De punt staat voor een class, het hekje voor id. Een class mag meerdere keren op een pagina voorkomen, een id moet uniek zijn.

for ( var i = 1; i <= 5; i++ ) {
    $("#banner" + i).hide().fadeIn(1000).delay(3500).fadeOut(500);
}

In dit scriptje staan twee fouten. De eerste is dat je op zoek gaat naar een div met het id banner (#banner), terwijl je een class wilt benaderen (.banner). De tweede fout is dat je op zoek gaat naar een div met het id 'banner1' t/m 'banner5' door de i achter de string te plakken ("#banner" + i). '"#banner" + i' geeft 'banner1' terug. Om dit scriptje werkend te krijgen moet je niet op zoek gaan naar een id maar naar een class, en moet je de integer i enkel gebruiken om het loopje vijf keer te doorlopen.

for ( var i = 1; i <= 5; i++ ) {
    $(".banner").hide().fadeIn(1000).delay(3500).fadeOut(500);
}

Dit is overigens vrij basale javascript en css. Als je daadwerkelijk een class 'banner' gebruikt heeft jouw eerste scriptje nooit kunnen werken

 

[peps03]

bedankt Tarabass!

Het is gelukt!