Javascript attr change avec fade issue

Question

J'essaie d'avoir une petite galerie. 1 grande image avec 3 en dessous. Lorsque vous cliquez sur l'une des images ci-dessous, l'img src de l'image principale/grande est modifié par une animation de fondu.

le code html est -

<div class="col-xs-12 col-sm-6"> 
     <div class="col-xs-12"> 
      <div class="col-xs-12 col-sm-12" style="padding-left: 5px; padding-right: 5px;"> 
       <img alt="Bentley Flying Spur" id="main1" src="img/gallery/flying-spur/1.JPG" style="border-bottom: 10px solid #fff;" width="100%" /> 
      </div> 
      <div class="col-xs-4 col-sm-4" style="padding-left: 5px; padding-right: 5px;"> 
       <a class="altimage1" href="" title="switch"><img alt="" src="img/gallery/flying-spur/1.JPG" width="100%" /></a> 
      </div> 
      <div class="col-xs-4 col-sm-4" style="padding-left: 5px; padding-right: 5px;"> 
       <a class="altimage2" href="" title="switch"><img alt="" src="img/gallery/flying-spur/2.JPG" width="100%" /></a> 
      </div> 
      <div class="col-xs-4 col-sm-4" style="padding-left: 5px; padding-right: 5px;"> 
       <a class="altimage3" href="" title="switch"><img alt="" src="img/gallery/flying-spur/3.JPG" width="100%" /></a> 
      </div> 
     </div> 
     <h2> 
      Flying Spur W12 
     </h2> 
     <p> 
      Colour | <strong>Sapphire Blue</strong> 
     </p> 
     <p> 
      Engine | <strong>6.0 litre twin-turbocharged W12</strong> 
     </p> 
     <p> 
      Max Power | <strong>616 bhp/460kW/625 PS @ 6,000RPM</strong> 
     </p> 
     <p> 
      Top Speed | <strong>199mph/320km/h</strong> 
     </p> 
    </div> 

et le javascript qui fonctionne sans fondu est ....

$(function() { 
    $('.altimage1').click(function() { 
     $("#main1").attr('src', "img/gallery/flying-spur/1.JPG"); 
     return false; 
    }); 
}); 

et est

$('.altimage12').click(function() { 
    $("#main4").fadeOut(400); 
    $("#main4").attr('src', "img/gallery/1951/3.JPG"); 
    $("#main4").fadeIn(400); 
    return false; 
}); 

le javascript j'ai essayé pour le fondu

Mais cela ne fait que rafraîchir la page. Toute idée serait grandement appréciée

Answer 1

Je fixe votre code, et voici comment il est:

$('[class*="altimage"]').click(function() { 
    var elem = $(this); 
    $("#main1").fadeOut(400, function() { 
    $("#main1").attr('src', elem.find("img").attr('src')).fadeIn(400); 
    }); 
    return false; 
}); 

Here is the JSFiddle demo

S'il vous plaît noter que les photos sont différents car ils sont générés au hasard dans la démo.

Answer 2

sans savoir ce que # main4 est, la façon dont vous appelez les fonctions de fondu n'a pas beaucoup de sens. parce qu'ils sont asynchrones, vous êtes tenus d'obtenir quelques problèmes de régularité ...

une meilleure façon de le faire est la suivante:

$('.altimage12').click(function() { 

    $("#main4").fadeOut(400, function() { 

    // 1st fadeout complete so now change the image 
    $("#main4").attr('src', "img/gallery/1951/3.JPG"); 

    // and now fade in again 
    $("#main4").fadeIn(400); 

}); 


    return false; 
}); 

maintenant faire en sorte que vous avez préchargé l'image pour obtenir une animation encore plus lisse

par exemple

var images = new Array() 

function preload() { 
    for (i = 0; i < preload.arguments.length; i++) { 
    images[i] = new Image() 
    images[i].src = preload.arguments[i] 
    } 
} 
preload(
    "http://your.site/img/gallery/1951/1.JPG", 
    "http://your.site/img/gallery/1951/2.JPG", 
    "http://your.site/img/gallery/1951/3.JPG", 
) 

Answer 3

Je ne l'ai pas trouvé $('.altimage12') et $("#main4"), mais avec d'autres sélecteurs tout fonctionne bien.

$('#main1').click(function() { 
    console.log('click'); 
    $("#main1").fadeOut(400); 
    $("#main1").attr('src', "http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/3d-glossy-orange-orbs-icons-business/105429-3d-glossy-orange-orb-icon-business-tool-hammer4-sc44.png"); 
    $("#main1").fadeIn(400); 
    return false; 
}); 

https://jsfiddle.net/chukanov/aw7u2sL8/2/