lentamente a cambiare/dissolvenza/animare un'immagine che cambia con JQuery

Question

Questo è il mio img, <img src="one.png" id="one" onMouseOver="animateThis(this)">

voglio cambiare lentamente questa immagine src a "oneHovered.png" quando l'utente passa sopra utilizzando jQuery. Quale metodo jQuery è il migliore per fare questo? Un sacco di esempi che vedo mi vogliono cambiare lo sfondo CSS. C'è qualcosa per modificare direttamente l'attributo src?

Answer 1

Si potrebbe iniziare prima dissolvendo l'immagine, controllando la durata della dissolvenza utilizzando il primo parametro opzionale. Una volta completata la dissolvenza, verrà attivata la richiamata anonima e la sorgente dell'immagine verrà sostituita con quella nuova. In seguito, abbiamo dissolvenza nell'immagine utilizzando un altro valore di durata, misurata in millisecondi:

HTML originale:

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

}); 

Infine, utilizzando jQuery, è molto, molto più facile da associare gli eventi JavaScript in modo dinamico, senza utilizzare alcun attributo JavaScript sul codice HTML stesso. Ho modificato il tag originale img in modo che contenga solo gli attributi src e id.

L'evento jQuery hover garantisce che la funzione venga attivata quando l'utente passa sopra l'immagine con il mouse.

Per ulteriori letture, vedere anche jQuery fadeOut e jQuery fadeIn.

Possibili problemi con i tempi di caricamento immagine:

Se è la prima volta che un utente ha oscillato sopra un'immagine e fare una richiesta di esso, ci potrebbe essere un leggero problema tecnico nel reale fadeIn, dal momento che non ci sarà essere latente dal server mentre sta richiedendo newImage.png. Una soluzione per questo è precaricare questa immagine. Ci sono diverse risorse su StackOverflow on preloading images.

Answer 2

Oltre a @ jmort253, sarebbe bello aggiungere uno min-height prima di svanire. Altrimenti si potrebbe notare uno strappo soprattutto per le immagini reattive.

Il mio suggerimento sarebbe

$('#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); 
    }); 

}); 

Answer 3

provare questo

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

Answer 4

Quando si cambia la sorgente di immagine attraverso jQuery, ci vuole un tempo di caricamento, che si traduce in alcuni effetti tremolanti. Ho modificato il codice sopra per risolvere il problema.

$(".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); 
    }); 
});