javascript - 淡入输入图像，淡出输出图像

Question

我有一个 Logo ，当我将鼠标悬停在图像上时我想淡入，然后当我悬停在图像外时淡出并替换为原始 Logo 。我几乎让它工作了，但是图像用这种方法双淡入并且图像不会淡出。可以在此处进行的任何更改。这是我的 html、js 和 css。运行实例:

    $(".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

对于这样简单的 :hover → fade 任务，您不需要 JS。
CSS 就足够了

.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>

此外，如果您使用 JS 更改 src，这意味着您的动画总是会在第一次出现垃圾，因为在您尝试实际制作动画时需要从服务器中提取图像.