web-dev-qa-db-fra.com

jQuery Change Image src avec effet de fondu

J'essaie de créer un effet dans lequel vous cliquez sur une vignette. Le lien vers la vignette remplacera l'image principale, mais fondez-la en fondu. C'est 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 de fondu fonctionne?

jqueryimagefade
36
WebDevDude

Vous devez d'abord le nommer 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 faut fadeOut l’image, puis changer la src quand elle est cachée, puis fadeIn.

Voici un exemple jsFiddle.

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

77
Sylvain

Au lieu d'utiliser FadeIn et fadeOut, il est préférable d'utiliser les fonctionnalités de fadeTo comme FadeIn et fadeOut, ce qui a créé un intervalle de temps entre elles pendant quelques microsecondes.

J'ai utilisé le code ci-dessus de Sylvain: grâce à lui

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

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

J'ai reproduit les exemples donnés ci-dessus. Cela donne un étrange scintillement, et j'ai constaté qu'il attend le chargement de l'image une fois que l'opacité est 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;
});`
1
Aamir Hussain

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

En d'autres termes, vous pouvez soit le masquer, soit le masquer, puis le masquer.

J'ai fait cet exemple, en gros, je le cache et puis je le passe en fondu:

http://jsfiddle.net/uGFMt/

0
jackJoe