如何在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" />