javascript的圖像轉換

Question

我有一個圖像標籤，可以在圖像標籤懸停後更改圖像。我想讓這個過渡順利。像下一張圖像的淡入淡出。這是代碼我現在有：

$('img').bind('mouseenter mouseleave', function() { 
    $(this).attr({ 
     src: $(this).attr('data-other-src') 
     , 'data-other-src': $(this).attr('src') 
    }) 
}); 

我是JavaScript的一個總的初學者

Answer 1

變化的快/慢過渡的MS值，淡出然後回到

$('img').bind('mouseenter mouseleave', function() { 
 
    var self = $(this); 
 
    self.fadeTo(1000, 0.30, function() { 
 
    self.attr({ 
 
     src: self.attr('data-other-src'), 
 
     'data-other-src': self.attr('src') 
 
    }); 
 
    }).fadeTo(500, 1); 
 
});

Answer 2

替換src屬性是「殘酷」的：你不能轉換它。

爲了做到這一點，您至少需要在轉換過程中至少在DOM中存在2個圖像。