淡入圖像，淡出出圖像

我有一個標誌，當我將鼠標懸停在圖像上時，我會淡入，然後淡出，並在我懸停時取代原始圖像圖片。我幾乎可以實現它的工作，但圖像雙重淡入，並且圖像不會淡出。可以在這裏完成的任何更改。這是我的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>

來源

2016-08-31 Criatura Eterna

你不需要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你試圖實際製作動畫的時候。

來源

2016-08-31 19:33:01

謝謝@ roko-c-buljan，這完成了。我現在正在試圖擴大效果而不是衰落，但它是一個很好的開始！ –

@CriaturaEterna在這種情況下：提示：展開父容器（並將其設置爲溢出：隱藏;） –

感謝您的提示！ –

爲什麼不呢？

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

來源

2016-08-31 19:26:33

實際上這不起作用，因爲當鼠標移出時，第二個圖像淡出爲隱形。這是我無法完成這項工作的原因之一。謝謝@只有一個 - chemistryblob –

好吧...我現在得到它...讓我編輯 –

也fadeIn不工作只是改變圖像 –

嘗試使用的stop（）停止當前正在運行的動畫

來源

2016-08-31 19:30:24 Vero

淡入圖像，淡出出圖像

回答

相關問題