Lentement modifier / fondre / animer une image en changeant avec JQuery

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

Je veux changer lentement cette image src "oneHovered.png" lorsque l'utilisateur survole l'aide de jQuery. Qui méthode jQuery est préférable de faire cela? Beaucoup d'exemples, je vois veulent que je change le fond de CSS. Est-il quelque chose à modifier l'attribut src directement?

source d'informationauteur zafrani

  1. 21

    Vous pourriez commencer par la décoloration de l'image, le contrôle de la durée de la fadeout en utilisant le premier paramètre facultatif. Après le fade out est terminé, l'anonyme de rappel se déclenche, et la source de l'image est remplacée par la nouvelle. Par la suite, nous avons fondu dans l'image en utilisant une autre valeur de la durée, mesurée en millisecondes:

    HTML d'origine:

    <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, à l'aide de jQuery, c'est beaucoup, beaucoup plus facile de lier les événements JavaScript de manière dynamique, sans utiliser de JavaScript attributs sur le code HTML lui-même. J'ai modifié l'original img étiquette de manière à ce qu'il vient de la src et id attributs.

    La jQuery hover événement permettra de s'assurer que la fonction se déclenche lorsque l'utilisateur place le pointeur de la souris sur l'image avec la souris.

    Pour en savoir plus, voir aussi jQuery fadeOut et fadeIn jQuery.

    Problèmes possibles avec une image de temps de chargement:

    Si c'est la première fois qu'un utilisateur a plané sur une image et de faire une demande pour elle, il y a peut être un léger défaut dans le fadeIn, puisqu'il y aura des temps de latence du serveur alors qu'il demande newImage.png. Une solution de contournement pour ce qui est de la précharge cette image. Il existe plusieurs ressources sur StackOverflow sur le préchargement des images.

  2. 2

    essayer cette

    <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);
    });
});
  3. 1

    En plus de @jmort253, il serait bien si vous ajoutez un min-height avant de disparaitre. Sinon, vous risquez de voir une trépidation pour sensible surtout les images.

    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);
    });

});
  4. 0

    Lors de la modification de la source de l'image par le biais de jquery, il faut un temps de chargement, ce qui entraîne certains 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);
  });
 });