powoli zmieniać/Fade/animować obraz zmienia się wraz z JQuery

Question

To mój img, <img src="one.png" id="one" onMouseOver="animateThis(this)">

Chcę powoli zmienia ten obraz src do „oneHovered.png”, gdy użytkownik znajdzie się nad użyciem jQuery. Która metoda jQuery najlepiej to zrobić? Wiele przykładów widzę, że chcę zmienić tło CSS. Czy jest coś, co mogłoby bezpośrednio zmienić atrybut src?

Answer 1

Można rozpocząć od pierwszego wygaszania obrazu, kontrolując czas trwania zaniku za pomocą pierwszego opcjonalnego parametru. Po zakończeniu zanikania anonimowe wywołanie zwrotne zostanie uruchomione, a źródło obrazu zostanie zastąpione nowym. Potem, znikną w obrazie przy użyciu innego wartość czasu trwania, mierzony w milisekundach:

Original HTML:

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

}); 

Wreszcie, przy użyciu jQuery, to o wiele łatwiej dynamicznie wiązać zdarzenia JavaScript, bez używania żadnych atrybutów JavaScript w samym kodzie HTML. Zmodyfikowałem oryginalny znacznik img, tak aby miał atrybuty src i id.

Zdarzenie jQuery hover zapewnia uruchamianie tej funkcji, gdy użytkownik najedzie myszą na obraz.

Aby uzyskać więcej informacji, zobacz także jQuery fadeOut i jQuery fadeIn.

Możliwe problemy ze czas ładowania obrazu:

Jeśli jest to pierwszy raz, kiedy użytkownik unosił się nad obrazem i składania wniosków o nim, nie może być niewielkie usterki w rzeczywistej fadeIn, ponieważ nie będzie być opóźnieniem z serwera podczas żądania newImage.png. Rozwiązaniem tego problemu jest wstępne załadowanie tego obrazu. Istnieje kilka zasobów na StackOverflow on preloading images.

Answer 2

Oprócz @ jmort253, byłoby miło, gdyby dodać przed dodaniem min-height. W przeciwnym razie może wystąpić szarpnięcie szczególnie w przypadku wrażliwych obrazów.

Moja sugestia będzie

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

spróbować tej

<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

Po zmianie źródła obrazu poprzez jQuery, to zajmuje czas ładowania, co powoduje w niektórych efektów migotania. Zmodyfikowałem powyższy kod, aby rozwiązać problem.

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