具有淡入淡出圖像的CSS

Question

我有一個用於切換圖片效果的ux開關。

http://plnkr.co/edit/JcPXpP0jE5GysBbZbrkp

我想要的圖片從一個超過1秒淡出其他，但我似乎無法得到淡入CSS工作。任何幫助將是偉大的，謝謝。

.off 
{ 
    opacity: 1; 
    -moz-transition: opacity 1s ease-in; 
    -o-transition: opacity 1s ease-in; 
    -webkit-transition: opacity 1s ease-in; 
    transition: opacity 1s ease-in; 
    position:relative; 
    z-index:2; 
} 

Answer 1

從我可以看到沒有動畫，因爲你正在交換img src屬性。這種交換是不可能的動畫。我的建議是，你加載兩個圖像，放置一個在另一個之前，並在前面添加動畫不透明度。這裏是我的plnkr：http://plnkr.co/edit/7uakbxwZETNnBiOAOfys?p=preview

Answer 2

嘗試使用jQuery的褪色，而不是：做一個.js文件，將其鏈接到你的HTML文件，並嘗試這個辦法：

$(document).ready(
     $('#yourSwitch').click(
      $('#yourImage').fadeOut(); 
     ); 
    ); 

而相反的，當你試圖使它淡入：

$(document).ready(
     $('#yourSwitch').click(
      $('#yourImage').fadeOut(); 
     ); 
    );