更改图像src jQuery动画

Question

I'm changing an image on hover using JS, and would like to add a fading animation to it. I've tried added .fadeToggle(), but nothing is working correctly.

 $("document").ready(function(){ $(".logo_container").mouseenter(function(){ $("#logo").attr('src',function(index, attr){ return attr.replace(".png", "-color.png"); }); }); $(".logo_container").mouseleave(function(){ $("#logo").attr('src',function(index, attr){ return attr.replace("-color.png",".png"); }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="logo_container"> <img src="https://ironhorseclub.wpengine.com/wp-content/uploads/2018/05/logo2-sm.png" alt="Wordpress Install" id="logo" data-height-percentage="100"> </div> 

Answer 1

You can do this with just CSS:

 img:hover { opacity: 0.5; transition: opacity 0.3s linear; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="logo_container"> <img src="https://ironhorseclub.wpengine.com/wp-content/uploads/2018/05/logo2-sm.png" alt="Wordpress Install" id="logo" data-height-percentage="100"> </div> 

Just change the opacity value, the time value, and/or the easing-type to whatever you want.

Answer 2

You can use jQuery fadeTo

$( "img" ).hover(function(){ 
$(this).fadeTo( "slow" , 0.5, function() {
// Animation complete.
});
});

Answer 3

I recommend achieving the same using only CSS

 .logo_container { height:172px; width:403px; display:inline-block; background-image: url("https://ironhorseclub.wpengine.com/wp-content/uploads/2018/05/logo2-sm.png"); -webkit-transition: background-image 2s ease-out; -moz-transition: background-image 2s ease-out; -o-transition: background-image 2s ease-out; transition: background-image 2s ease-out; } .logo_container:hover { background:url("https://ironhorseclub.wpengine.com/wp-content/uploads/2018/05/logo2-sm-color.png") no-repeat center; } 

 <div class="logo_container"></div>