慢慢改變/淡入淡出/動畫的圖像與jQuery

Question

改變這是我的IMG， <img src="one.png" id="one" onMouseOver="animateThis(this)">

我想，當用戶將鼠標懸停使用jQuery慢慢改變這個圖片src爲「oneHovered.png」。哪種jQuery方法最適合這樣做？很多我看到的例子都希望我改變CSS背景。有沒有什麼可以直接改變src屬性？

Answer 1

您可以先開始淡出圖像，使用第一個可選參數控制淡出的持續時間。淡出完成後，匿名回調將會觸發，並且圖像的來源將被替換爲新的。之後，我們在圖像褪色使用其他時間值，以毫秒爲單位：

原始的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); 
    }); 

}); 

最後，使用jQuery，這是很多，更容易動態綁定JavaScript事件，而不在HTML本身上使用任何JavaScript屬性。我修改了原始img標籤，以便它具有src和id屬性。

jQuery hover事件將確保該函數在用戶將鼠標懸停在圖像上時觸發。

欲瞭解更多信息，請參閱jQuery fadeOut和jQuery fadeIn。

可能出現的問題與圖像的加載時間：

如果這是第一次一個用戶一直徘徊在一個圖像，以及爲它的請求，有可能是在實際的淡入輕微的毛刺，因爲會在服務器請求newImage.png時，服務器會產生延遲。解決方法是預加載此圖像。有幾個資源StackOverflow on preloading images。

Answer 2

除了@ jmort253，如果在淡出之前添加min-height將會很好。否則，您可能會看到特別針對響應式圖像的抽搐。

我的建議是

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

試試這個

<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

當通過jQuery的改變圖像源，它需要加載時間，這會導致一些閃爍的效果。我修改了上面的代碼來解決這個問題。

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