web-dev-qa-db-fra.com

Changer/fader/animer lentement une image changeant avec JQuery

Ceci est mon img, <img src="one.png" id="one" onMouseOver="animateThis(this)">

Je veux changer lentement cette image src en "oneHovered.png" lorsque l'utilisateur passe la souris sur l'utilisation de jQuery. Quelle méthode jQuery est préférable de le faire? De nombreux exemples que je vois veulent que je modifie l'arrière-plan CSS. Y at-il quelque chose pour modifier l'attribut src directement? 

jqueryimagejquery-animatefadesrc
11
zafrani

Vous pouvez commencer par faire d'abord un fondu en fondu sur l'image, en contrôlant la durée du fondu en utilisant le premier paramètre facultatif. Une fois le fondu terminé, le rappel anonyme se déclenche et la source de l'image est remplacée par la nouvelle. Ensuite, nous intégrons l’image en utilisant une autre valeur de durée, mesurée en millisecondes:

HTML original:

<img src="one.png" id="one" />

JavaScript:

$('#one').hover(function() {

    // increase the 500 to larger values to lengthen the duration of the fadeout 
       // and/or fadein
    $('#one').fadeOut(500, function() {
        $('#one').attr("src","/newImage.png");
        $('#one').fadeIn(500);
    });

});

Enfin, avec jQuery, il est beaucoup plus facile de lier des événements JavaScript de manière dynamique, sans utiliser d'attribut JavaScript dans le code HTML lui-même. J'ai modifié la balise img originale afin qu'elle ne contienne que les attributs src et id.

L'événement jQuery hover s'assurera que la fonction est activée lorsque l'utilisateur survole l'image avec la souris. 

Pour plus de lecture, voir aussi jQuery fadeOut et jQuery fadeIn .

Problèmes possibles avec les temps de chargement des images:

Si c’est la première fois qu’un utilisateur survole une image et en fait la demande, il se peut que le fadeIn actuel présente un léger problème, puisqu’il y aura une latence du serveur pendant la demande de newImage.png. Une solution de contournement pour cela consiste à précharger cette image. Il existe plusieurs ressources sur StackOverflow sur le préchargement des images .

22
jmort253

essaye ça

<img class="product-images-cover" src="~/data/images/productcover.jpg" />
<div class="list-images-product">
 <div>
   <img class="thumbnail" src="~/data/images/product1.jpg" />
 </div>
 <div>
   <img class="thumbnail" src="~/data/images/product2.jpg" />
 </div>
</div>

$(document).ready(function () {
    $(".list-images-product .thumbnail").click(function (e) {
        e.preventDefault();
        $(".product-images-cover").fadeOut(250).attr("src", $(this).attr('src')).fadeIn(250);
    });
});
2
November Man

En plus de @ jmort253, ce serait bien si vous ajoutez un min-height avant la fermeture en fondu. Sinon, vous pourriez voir une secousse pour les images réactives en particulier.

Ma suggestion serait

$('#one').hover(function() {
    // add this line to set a minimum height to avoid jerking
    $('#one').css('min-height', $('#one').height());
    // increase the 500 to larger values to lengthen the duration of the fadeout 
       // and/or fadein
    $('#one').fadeOut(500, function() {
        $('#one').attr("src","/newImage.png");
        $('#one').fadeIn(500);
    });

});
1
Kamrul

Lorsque vous modifiez la source de l'image via jQuery, le temps de chargement est long, ce qui entraîne des effets de scintillement. J'ai modifié le code ci-dessus pour résoudre le problème.

$(".list-images-product .thumbnail").fadeTo(1000,0.30, function() {
  $(".list-images-product .thumbnail").attr("src",newsrc);
  $(".list-images-product .thumbnail").on('load', function(){
    $(".list-images-product .thumbnail").fadeTo(500,1);
  });
 });
0
Aamir Hussain