如何在jquery中切換img標簽的src

Question

我在HTML中有一個帶有源圖像的img標簽; 然后我會在鼠標懸停時將圖像切換到另一個圖像; 我在rel屬性中設置的圖像。

然后在mouseout上切換回源圖像。

我寫了這個腳本，但它不起作用; 問題肯定是由於錯誤使用“元素”，但我無法解決。

 function hover(element) { $(element).fadeOut(1000, function(element) { element.setAttribute("src", element.attr("rel")); }).fadeIn(1000); return false; } function unhover(element) {} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <img id="image" src="http://www.google.com/logos/2011/trevithick11-hp.jpg" rel="http://www.google.com/logos/2011/mothersday11-hp.jpg" onmouseover="hover(this);" onmouseout="unhover(this);" /> 

解決后，我將專注於mouseout事件

Answer 1

你將簡單的vanilla JS與jQuery混合在一起。 您要做的第一件事是刪除內聯事件處理程序。 然后，使用這個：

$('#image').hover(function(){
    $(this).fadeOut(1000, function() {
        $(this).attr( "src", $(this).attr("rel") );
    }).fadeIn(1000);
},function(){})

 $('#image').hover(function() { $(this).fadeOut(1000, function() { $(this).attr("src", $(this).attr("rel")); }).fadeIn(1000); }, function() {}) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <img id="image" src="http://www.google.com/logos/2011/trevithick11-hp.jpg" rel="http://www.google.com/logos/2011/mothersday11-hp.jpg" /> 

如果你也想處理mouseout，試試這個：

 $('#image').hover(function() { $(this).stop().fadeOut(1000, function() { $(this).attr({ "src": $(this).attr("rel"), "rel": $(this).attr("src") }); }).fadeIn(1000); }, function() { $(this).stop().fadeOut(1000, function() { $(this).attr({ "src": $(this).attr("rel"), "rel": $(this).attr("src") }); }).fadeIn(1000); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <img id="image" src="http://www.google.com/logos/2011/trevithick11-hp.jpg" rel="http://www.google.com/logos/2011/mothersday11-hp.jpg" /> 

Answer 2

$('#img1').mouseover(function(){
  $('#img1').attr("src","new_source");

});
$('#img1').mouseout(function(){
  $('#img1').attr("src","old_source");

});

你可以在這里看到它

Answer 3

試試這個：它會幫助你......

function hover(element) {
    $("#image").fadeOut(200, function() {
        element.src= "http://www.google.com/logos/2011/mothersday11-hp.jpg";
    }).fadeIn(200);
  return false;
}

function unhover(element) {
            element.src= "http://www.google.com/logos/2011/trevithick11-hp.jpg";
}

Answer 4

 var original_src = null; $('#image').hover( // when mouse is over function(){ original_src = $(this).attr('src'); $(this).attr("src", $(this).attr("rel")); }, // when mouse is out function(){ $(this).attr("src", original_src); } ); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <img id="image" src="http://www.google.com/logos/2011/trevithick11-hp.jpg" rel="http://www.google.com/logos/2011/mothersday11-hp.jpg" /> 

這是一個動畫示例：

 $(function(){ var image = $('#image'), src = image.attr('src'), rel = image.attr('rel'), cloned_image = image.clone(), speed = 300; cloned_image. attr('src', rel). attr('id', image.attr('id')+'-clone'). css({ position: 'fixed', left: image.position().left, top: image.position().top, display: 'none' }). insertAfter(image); image.mouseover( function(){ cloned_image.stop().fadeIn(speed); $(this).stop().fadeOut(speed); }, ); $('#'+image.attr('id')+'-clone').mouseout(function(){ image.stop().fadeIn(speed); $(this).stop().fadeOut(speed); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <img id="image" src="http://www.google.com/logos/2011/trevithick11-hp.jpg" rel="http://www.google.com/logos/2011/mothersday11-hp.jpg" />