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

尝试使用 jQuery 淡入淡出：制作一个 .js 文件，link 将其添加到您的 .html 文件中并试试这个：

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

当你试图让它淡入时相反：

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

Answer 2

据我所知，没有动画，因为您正在交换 img src 属性。这种交换是不可能动画的。我的建议是加载两张图片，将一张放在另一张后面，并设置前面一张的不透明度动画。这是我的 plnkr：http://plnkr.co/edit/7uakbxwZETNnBiOAOfys?p=preview

CSS 图像淡入淡出

CSS with fading image in and out

css

toggle

switch-statement