Discussion :

[neo18045]

Bonjour,

Voilà comme dit dans le titre je souhaiterai faire un slide d'image tout bête. J'ai déjà utiliser des pluggins style cycle ou autre qui marche très bien mais hélas m'apporte quelque bug pas agréable sur mon site.

Du coup je veux essayer de le faire à ma manière et de façon toute bête.

J'ai une balise <a></a> et une balise <img />

La seul chose que je souhaite effectuer est la suivante : toute les x seconde, un fadeOut de l'image (ou de la div contenant les balise a et img), je change les attributs actuels de ma balise a et img, et affiche le nouveau.

Voilà mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var referenceIndex = 1;
setInterval(function(){
    $("#referenceSlider tr td").fadeOut("slow",function(){
        $("#referenceLink").attr({"href":tabReference[referenceIndex][1]});
	$("#referenceImg").attr({
	    "src":"/administration/fr/reference/"+tabReference[referenceIndex][2],
	    "title":tabReference[referenceIndex][0],
	    "alt":tabReference[referenceIndex][0]
	});
    });
    $("#referenceSlider tr td").fadeIn("slow");
    referenceIndex++;
    if(referenceIndex+1 > tabReference.length){
        referenceIndex = 0;
    }
}

Bon j'ai une histoire de tableau contenant les données mais c'est pas le plus important. Ce qui me dérange, c'est que entre mon fadeIn et mon fadeOut l'image n'a pas toujours le temps de changer ce qui fait que parfois l'image se cache, elle se réaffiche et au moment de la réapparition, elle change.

Comment faire pour que justement mon image se cache, les attributs changent et à la réapparition ce soit toujours une nouvelle qui apparaisse ?

Merci d'avance.

[neo18045]

C'est bon problème résolu. Je ne sais pas si c'est la meilleur manière de faire mais j'ai juste fais tout mon animation en une seule ligne et en rajoutant la fonction delay().

Ca donne ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
$("#referenceSlider tr td div").fadeOut("slow",function(){
    $("#referenceLink").attr({"href":tabReference[referenceIndex][1]});
    $("#referenceImg").attr({
        "src":"/administration/fr/reference/"+tabReference[referenceIndex][2],
        "title":tabReference[referenceIndex][0],
        "alt":tabReference[referenceIndex][0]
    });
}).delay(500).fadeIn("slow");

Je rajoute juste un délais d' 1/2 seconde entre le fadeOut et le fadeIn histoire de ne pas voir que l'image change.

S'il y a des solutions mieux qui existe je prend, mais sinon ça a l'air de marcher pas mal.