Sujet : [Résolu] 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');
        
    });
    
});

our 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

2

Re : [Résolu] fadeIn, fadeOut

$("#sliderDiapo img").click(function () { 
        if($('#imageBig').html() != "")
        {
                $('#imageBig').fadeOut('slow', function () {
                        $('#imageBig').html('<img src="'+ $(this).attr('src') +'" alt="" />');
                        $('#imageBig').fadeIn('slow');
                });
        }
        else
        {
                $('#imageBig').html('<img src="'+ $(this).attr('src') +'" alt="" />');
                $('#imageBig').fadeIn('slow');
        }
});  

Petite expliction :
Si ton div "imageBig" est vide, tu change le "src" et tu fais le "fadeIn".
Sinon on fait le "fadeOut" de "imageBig", puis à la fin, dans la function de callback, on change le "src" et on fait un "fadeIn".

J'espère que c'est compréhensible.

Re : [Résolu] fadeIn, fadeOut

héhé smile y a que toi pour aidé ici tongue

je suis passé d'autre test comme tu as pu le voir

j'ai testé ton code smile

alors quand je clic la premiere fois sur une vignette il me l'affiche bien en fadeIn, En suite si je clic sur une autre vignette celle active disparait bien en fadeOut et puis plus rien.

j'ai alors été regarder dans la page source générée et ca mets ceci

<img alt="" src="undefined"/>

Re : [Résolu] fadeIn, fadeOut

apparemment le problème vient tu this lorsque il y a déjà quelque chose d’afficher, car en mettant le chemin de l'image a la place du this, cela fonctionne

5

Re : [Résolu] fadeIn, fadeOut

$("#sliderDiapo img").click(function () { 
    var _this = this;

...

                $('#imageBig').fadeOut('slow', function () {
                        $('#imageBig').html('<img src="'+ $(_this).attr('src') +'" alt="" />');
                        $('#imageBig').fadeIn('slow');
                });

...

Essai comme ça. Tu peux bien sur nommer la variable "_this" comme tu le souhaite, si ce n'est pas clair pour toi.
Le problème vient du fait que le "this" est surcharger dans la fonction de callback.

Re : [Résolu] fadeIn, fadeOut

Effectivement cela fonctionne.

une question, donc le fait de simplement mettre une variable a this alors que mettre simplement this qui en fin de compte est la même chose cela fonctionne. je comprend pas.

et comme savoir quand comme tu dis this est surchargé? cela peut arriver avec d'autres également?

Re : [Résolu] fadeIn, fadeOut