Question

当我将鼠标悬停在图像上时，我有一个想要淡入的徽标，然后当我将鼠标悬停在图像上时淡出并被原始图像替换。我几乎让它工作，但图像双重淡入这种方法，图像不会淡出。任何可以在这里完成的更改。这是我的html，js和css。运行实例：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您不需要JS来完成这些简单的:hover → fade任务 CSS足够了

＆＃13;

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

＆＃13;

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

＆＃13;

此外，如果您使用JS更改src，这意味着您的动画将始终第一次丢失，因为在您尝试实际为其设置动画时需要从服务器中提取图像。

Answer 2

为什么不呢？

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

尝试使用stop（）来停止当前正在运行的动画

淡入一个输入图像，淡出一个外出的图像

3 个答案: