Animate img replacement on jquery hover

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

Вы можете комбинировать цвета фона и прозрачных PNGs.

Вы можете использовать эту технику и до сих пор изменить фон с JQuery:

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