如何在jquery中切换img标签的src

Question

我在 HTML 中有一个带有源图像的 img 标记；然后我会在鼠标悬停时将图像切换到另一个图像；正是我在 rel 属性中设置的图像。

然后在鼠标移出时，切换回源图像。

我写了这个脚本，但它不起作用；这个问题肯定是由于错误使用了“元素”，但我无法解决。

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

您正在将普通的 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" />

如果你也想处理鼠标移出，试试这个：

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

});

你可以看到它直播here

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" 
     />