动画img替换jquery悬停

Question

我试图用相同图像的全白版本替换网站上的一些徽标图像。这个想法是，当你将鼠标悬停在图像上时，你会看到带有彩色背景的白色徽标(在css中完成)

jQuery(document).ready(function() {
    jQuery('.la-item img').hover(function() {
      var image = jQuery(this).attr('data-imagenormal')+'-white.png';
      jQuery(this).attr("src", image)
      jQuery(this).addClass("circleitem")
    }, function() {
        var image = jQuery(this).attr('data-imagenormal')+'.png';
        jQuery(this).attr("src", image )
        jQuery(this).removeClass("circleitem")
    });
  });

这实际上看起来很棒，但我希望它在2秒内动画化。我试过用这个。动画，但它不起作用。

jQuery(document).ready(function() {
    jQuery('.la-item img').hover(function() {
     var image = jQuery(this).attr('data-imagenormal')+'-white.png';
      jQuery(this).animate({
      jQuery(this).attr("src", image)
      jQuery(this).addClass("circleitem")
        )}
    }, function() {
        var color = jQuery(this).attr('data-imagenormal')+'.png';
        jQuery(this).animate({
        jQuery(this).attr("src", color )
        jQuery(this).removeClass("circleitem")
    });
    })
  });

Answer 1

不要用<img>标签，只用CSS和背景。

例如(我不想和你的有相同的结构):

HTML

<div id="logo"></div>

CSS

#logo {
    width: 50px;
    height: 50px;
    background-color: #whatyouwhant;
    background-image: url('yourlogo.png');
    background-position: center center;
    background-repeat: no-repeat;
    transition: .3s;
}
#logo:hover {
    background-image: url('yourwhitelogo.png');
}

你可以组合背景色和透明png。

你可以使用这种技术，仍然改变背景与jQuery:

$('.matchyourelements').hover(function() {
    $(this).css('background-image', $(this).data('imagenormal')+'-white.png');
});

Answer 2

您可以这样做。

<img src="one.png" id="one" />
//Script
$('#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");
    //here you can add or remove class
    $('#one').fadeIn(500);
 });
});