Dần dần thay đổi/fade/động một hình ảnh thay đổi với JQuery

Question

Đây là img tôi, <img src="one.png" id="one" onMouseOver="animateThis(this)">

Tôi muốn chậm thay đổi hình ảnh này src để "oneHovered.png" khi người dùng di chuột qua sử dụng jQuery. Phương pháp jQuery nào là tốt nhất để làm điều này? Rất nhiều ví dụ tôi thấy muốn tôi thay đổi nền CSS. Có bất cứ điều gì để thay đổi thuộc tính src trực tiếp?

Answer 1

Bạn có thể bắt đầu bằng cách làm mờ hình ảnh đầu tiên, kiểm soát thời lượng của fadeout bằng thông số tùy chọn đầu tiên. Sau khi mờ dần hoàn tất, cuộc gọi lại ẩn danh sẽ kích hoạt và nguồn của hình ảnh được thay thế bằng hình ảnh mới. Sau đó, chúng tôi phai nhạt trong hình ảnh sử dụng một giá trị thời gian, tính bằng mili giây:

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

}); 

Cuối cùng, sử dụng jQuery, nó nhiều, dễ dàng hơn để liên kết các sự kiện JavaScript động, mà không sử dụng bất kỳ thuộc tính JavaScript nào trên chính HTML. Tôi đã sửa đổi thẻ img gốc sao cho thẻ chỉ có thuộc tính src và id.

Sự kiện jQuery hover sẽ đảm bảo rằng chức năng sẽ kích hoạt khi người dùng di chuột qua hình ảnh bằng chuột.

Để đọc thêm, hãy xem jQuery fadeOut và jQuery fadeIn.

vấn đề có thể xảy ra với thời gian tải ảnh:

Nếu đây là lần đầu tiên người dùng đã quét qua một hình ảnh và thực hiện một yêu cầu cho nó, có thể có một trục trặc nhỏ trong fadeIn thực tế, kể từ khi có sẽ là độ trễ từ máy chủ trong khi yêu cầu newImage.png. Giải pháp cho việc này là tải trước hình ảnh này. Có một số tài nguyên trên StackOverflow on preloading images.

Answer 2

Ngoài @ jmort253, sẽ tốt hơn nếu bạn thêm min-height trước khi mờ dần. Nếu không, bạn có thể thấy một giật cho hình ảnh đáp ứng đặc biệt.

Đề nghị của tôi sẽ là

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

thử này

<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

Khi thay đổi nguồn hình ảnh thông qua jquery, phải mất một thời gian tải, mà kết quả trong một số hiệu ứng nhấp nháy. Tôi đã sửa đổi mã trên để giải quyết vấn đề.

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