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文件，将其链接到.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

2 个答案: