Change image src jquery animation

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>

CSS/CSS3 animations were made for this. Do you want a jQuery specific solution? If not look at https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions — soulshined, May 15 '18 at 22:10
Possible duplicate of [jQuery to change (with fade animation) background image of div on hover](https://stackoverflow.com/questions/18759402/jquery-to-change-with-fade-animation-background-image-of-div-on-hover) — Muhammad Usman, May 15 '18 at 22:10

score 2 · Accepted Answer · answered May 15 '18 at 22:27

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>

you may see a quick blink of an image when first load the page. This is because the second image that is about to replace the original is not loaded. To avoid this you can use 'preload' or JavaScript. Detals: https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content — vsevolodts, May 16 '18 at 22:58

score 1 · Answer 2 · answered May 15 '18 at 22:10

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.

score 1 · Answer 3 · answered May 15 '18 at 22:17

1

You can use jQuery fadeTo

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

answered May 15 '18 at 22:17

Cliff Rono

324
3
9

Change image src jquery animation

3 Answers3