jQuery Change Image src avec effet de fondu

Question

J'essaie de créer un effet dans lequel vous cliquez sur une image miniature et le lien vers la miniature remplacera l'image principale, mais en fondu. Voici le code que j'utilise actuellement :

 $(".thumbs a").click(function(e) {
    e.preventDefault();
    $imgURL = $(this).attr("href");
    $(".boat_listing .mainGallery").fadeIn(400, function() {
        $(".boat_listing .mainGallery").attr('src',$imgURL);
    });
});

Cela fonctionne et remplace l'image sans effet de fondu. Que dois-je changer pour que l'effet fadeIn fonctionne ?

Answer 1

Vous devez d'abord le faire fadeOut() , ou le masquer.

Essaye ça :

 $(".thumbs a").click(function(e) {
    e.preventDefault();
    $imgURL = $(this).attr("href");
    $(".boat_listing .mainGallery")
        .fadeOut(400, function() {
            $(".boat_listing .mainGallery").attr('src',$imgURL);
        })
        .fadeIn(400);
});

Il devrait fadeOut l'image, puis modifier le src lorsqu'il est masqué, puis fadeIn .

Voici un exemple jsFiddle.

Edit: vous pouvez trouver une solution plus récente et meilleure dans la réponse de Sandeep Pal

Answer 2

Je pense qu'au lieu d'utiliser FadeIn et fadeOut, il est préférable d'utiliser la fonctionnalité fadeTo comme fadeIn et fadeOut ont créé un intervalle de temps entre eux pendant quelques micro-secondes.

J'ai utilisé le code ci-dessus de Sylvain : merci à lui

 $("#link").click(function() {

  $("#image").fadeTo(1000,0.30, function() {
      $("#image").attr("src",$("#link").attr("href"));
  }).fadeTo(500,1);
  return false;
});

Answer 3

J'ai reproduit les exemples donnés ci-dessus. Cela donne un scintillement étrange, que j'ai trouvé qu'il attend que l'image se charge après que son opacité soit restaurée à 1. J'ai modifié le code par Sandeep.

 $("#link").click(function() {

$("#image").fadeTo(1000,0.30, function() {
  $("#image").attr("src",$("#link").attr("href"));
  $("#image").on('load', function(){
    $("#image").fadeTo(500,1);
  });
 });
 return false;
});`

Answer 4

Vous ne pouvez pas fondre quelque chose qui est déjà à 100% alpha :)

En d'autres termes, vous le masquez ou vous le masquez, puis vous le masquez.

J'ai fait cet exemple, en gros, je le cache, puis je le masque :

http://jsfiddle.net/uGFMt/