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秒内为变化设置动画。我尝试过使用this.animate，但它不起作用。

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 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);
 });

});

Answer 2

请勿使用<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');
});

在jquery悬停上动画img替换

2 个答案: