具有淡入淡出图像的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(); 
     ); 
    );