Onclick在img上動畫img並淡出

Question

我有一個背景圖像的div。我想有一個功能 onclick的div在同一個寬度和高度相等的圖像在原始div上淡出並再次淡出。

Websearch爲我提供了按鈕解決方案，我真的很喜歡沒有按鈕的解決方案保持可見。

我在單擊淡入淡出部分時出現問題，並在舊的圖像上獲得新圖像。我知道img-swap，但我想要一個動畫。

難道有人指着我正確的方向嗎？

謝謝。

Answer 1

可能有很多方法可以做到這一點......這裏有一個使用僞元素和JQuery（用於點擊事件）。

Codepen Demo

HTML

<div class="clicker"> </div> /* note no content - not always appropriate */ 

CSS

.clicker { 
    width:250px; 
    height:250px; 
    margin:10px; 
    border: 1px solid lightgrey; 
    background:url(http://lorempixel.com/output/city-q-c-250-250-6.jpg); 
    /* default bg image */ 
    position:relative; 

} 

.active:after { 
    position:absolute; 
    content:""; 
    top:0; 
    left:0; 
    height:100%; 
    width:100%; 
    background:url(http://lorempixel.com/output/people-q-c-250-250-5.jpg); 
    /* bg image of pseudo element */ 
    animation: fade 1s; /* call the animation */ 

} 

/* define the animation */  

@-webkit-keyframes fade { 
    0% { opacity: 0; } 
    100% { opacity: 1; } 
} 
@-moz-keyframes fade { 
    0% { opacity: 0; } 
    100% { opacity: 1; } 
} 
@-o-keyframes fade { 
    0% { opacity: 0; } 
    100% { opacity: 1; } 
} 
@keyframes fade { 
    0% { opacity: 0; } 
    100% { opacity: 1; } 
} 

JQuery的

(function($) { 
    $('.clicker').click(function(){ 
    $(this).toggleClass('active'); 
    }); 
})(jQuery); 

盡我所能用有限的做JQ技能，但根據您的要求。內嵌圖片將極大地簡化事情