11548 sujets

JavaScript, DOM et API Web HTML5

FadeIn, fadeOut

Bonjour à toutes et tous

voila j'ai plusieurs vignette, et quand je clique dessus elle affiche dans un div caché au départ.

la div apparait en fadeIn, mais j'aimerais que lorsque je clique sur une autre vignette, l'image affiché disparaisse en fadeOut et la nouvelle en fadeIn.

voici mon code


<div id="imageBig"></div>

    <div id="diapo">
	<div id="sliderDiapo">
        <img src="photos/album1/001.JPG" style=" width:150px;" alt="image" />
        <img src="photos/album1/002.JPG" style=" width:150px;" alt="image" />
        <img src="photos/album1/003.JPG" style=" width:150px;" alt="image" />
        <img src="photos/album1/004.JPG" style=" width:150px;" alt="image" />
        </div>
    </div>






$(document).ready(function() {
	
	$('#imageBig').hide();
	
	
	$('#sliderDiapo img').click(function(){
	
		$('#imageBig').html('<img src="'+ $(this).attr('src') +'" alt="" />');
		//$('#imageBig img').addClass('active');
		$('#imageBig').fadeIn('slow');
		
	});
	
});


Pour le moment la première image au clic apparaît bien en fadeIn.
Quelle est la marche a suivre pour que lorsque je clic sur une nouvelle image, l'image actuelle disparaîsse en fadeOut et la nouvelle en FadeIn?

j'ai regardé dans le doc, mais je n'ai pas trouvé d'exemple à se sujet

Merci à vous
Salut,

L'idée sera de superposé tes images en utilisant la position absolute.

Une fois qu'ils sont superposés, tu te créé par exemple deux classes:

-Active (z-index: 2;)
-Next (z-index: 1;)

(Évidemment, tu utilise jQuery pour modifier les classes des images au cours du déroulement)

Au départ, toutes tes images sont visible (opacité à 1). Et lors de la transition, tu fais un fadeOut() seulement sur Active. Une fois qu'elle est totalement disparu (utilise le callback de la fonction fadeOut pour cela), tu lui retire la classe .active, et tu met la classe .active à l'image de classe .next (auquel tu retire ensuite le classe .next) et puis tu donne la classe .next à la prochaine image... Et ainsi de suite !
JE te remercie pour ta réponse,

Malheureusement ce n'est pas ca que je veux faire.

pour te donnée une idée, j'ai mes image vignette qui defile en bas de la page, quand je clic dessus, je fais apparaître l'image dans un div caché appelé imageBig.

jusque la ca va, lors d'un nouveau clic sur une vignette mon div imageBig devrais disparaitre en fadeOut et ré apparaitre en fadeIn avec la nouvelle image
Ou en fait, peut-être un truc du genre plutôt:


$(function() { // C'est plus court et performant comme ça
	$('#imageBig').hide(); // cette ligne ne devrait pas être là et se trouver dans ton CSS
	$('#sliderDiapo').find('img').click(function(){ // utiliser .find() dans ce cas est plus rapide car tu vise tout d'abord un id
		// ici on met nos éléments en cache pour des raisons de performances
		var element  = $(this),
			imageBig = $('#imageBig')
			;
		imageBig.fadeOut(function () {
			imageBig
				.html(element) // ce sera plus facile d'y copier seulement ton élément au lieu d'écrire une chaine de caractère (note, il faudra peut-être utiliser element.clone() mais je ne suis pas sûr. Essaie sans pour commencer)
				.fadeIn('slow')
				;
		});
	});
});
Voila ce que ca donne,

les images apparaisse bien en fadIn et fadeOut mais elle devraient apparaitre en grand et pas prendre la même dimension que les vignettes.

et ne pas disparaître dans mon slide qui défile en dessous Smiley smile

mais je te remercie pour les commentaire que tu as mis a ton code, au moins je vois +- a quoi cela sert Smiley smile
a écrit :
et ne pas disparaître dans mon slide qui défile en dessous


Utilise .clone() dans ce cas, comme j'ai écris dans les commentaires du code.

Pour la taille, à toi de les fixer dans ce cas. (change l'attribut style ou utilise .removeAttr('style') )

Et sur une autre amélioration que tu peux utiliser, au lieu d'utiliser .click() (puisque tu as plusieurs <img>), utilise .on() pour déléguer tes évènements, ainsi: 


$('#sliderDiapo').on('click', 'img', function () {
  // ton code
});


(pour mieux comprendre la délégation d'évènements : http://www.elijahmanor.com/2012/02/differences-between-jquery-bind-vs-live.html )
Modifié par Vaxilart (18 Feb 2012 - 15:36)
Sujet clos
Aller à