fade-in an incoming image, fade-out an out going image

Question

I have a logo that I want to fade-in when I hover on the image, and then fade out and be replace by the original when I hover out of the image. I almost got it working but the image double fades-in with this approach and the image does not fade-out. Any changes that can be done here. Here is my html, js and css. Run live example:

    $(".opening").hover(function() {
      $(".opening img").animate({
        opacity: 1
      }, "slow");
      $(".opening img").css({
        "width": 250
      });
      $(".opening img").attr("src", "http://www.letsgodigital.org/images/producten/3376/pictures/canon-eos-sample-photo.jpg");
    }, function() {
      $(".opening img").animate({
        opacity: 0
      }, "slow");
      $(".opening img").css({
        "width": 150
      });
      $(".opening img").attr("src", "http://www.cameraegg.org/wp-content/uploads/2015/06/canon-powershot-g3-x-sample-images-3-620x413.jpg");
      $(".opening img").animate({
        opacity: 1
      }, "slow");
    });

.opening {
  padding: 0 4.2%;
  display: inline;
}
.opening img {
  width: 150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div class="opening">
  <img src="http://www.cameraegg.org/wp-content/uploads/2015/06/canon-powershot-g3-x-sample-images-3-620x413.jpg" />
</div>

Answer 1

Why not this?

$(".opening").mouseenter(function(){
    $(".opening img").fadeIn("slow", function () {
        $(this).css({"width":250}).attr("src","http://www.letsgodigital.org/images/producten/3376/pictures/canon-eos-sample-photo.jpg");
    });
}).mouseleave(function () {
    $(".opening img").fadeOut("slow", function () {
        $(this).css({"width":150}).attr("src","http://www.cameraegg.org/wp-content/uploads/2015/06/canon-powershot-g3-x-sample-images-3-620x413.jpg").fadeIn("slow");
    });
});

Answer 2

You don't need JS for such simple :hover → fade tasks.
CSS is quite enough

.opening {
  position: relative; /* add this */
  display: inline-block; /* change */
}
.opening img {
  width: 150px;
}
.opening img + img{ /* the second image */
  position:absolute;
  top:0;
  transition: 0.8s; -webkit-transition: 0.8s;
  visibility:hidden;
  opacity:0;
}
.opening:hover img + img{
  visibility:visible;
  opacity:1;
  width: 250px;
}

<div class="opening">
  <img src="http://www.cameraegg.org/wp-content/uploads/2015/06/canon-powershot-g3-x-sample-images-3-620x413.jpg" />
  <img src="http://www.letsgodigital.org/images/producten/3376/pictures/canon-eos-sample-photo.jpg" />
</div>

Also, if you change src using JS that means that your animation will always junk the first time since the image needs to be pulled from the server at the time you're trying to actually animate it.

Answer 3

try to use stop() to stop the currently-running animation