淡入一個輸入圖像，淡出一個外出的圖像

Question

當我將鼠標懸停在圖像上時，我有一個想要淡入的徽標，然后當我將鼠標懸停在圖像上時淡出並替換為原始圖像。 我幾乎讓它工作，但圖像雙重淡入這種方法，圖像不會淡出。 任何可以在這里完成的更改。 這是我的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

你不需要JS這么簡單:hover → fade任務。
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 ，則意味着您的動畫將始終是第一次垃圾，因為在您嘗試實際動畫時需要從服務器中提取圖像。

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（）來停止當前正在運行的動畫