javascript - 需要改变不透明度 : 0 to 1 slowly with animation using jquery

Question

我正在处理包括窗帘打开和关闭动画在内的动画。在那里，我使用 jquery 来实现窗帘打开和关闭效果。但是我想在窗帘打开和关闭时改变我的背景不透明度。

例如，我想在窗帘打开时将背景图像的不透明度从 0 缓慢更改为 1，同样，我想在窗帘关闭时将背景图像的不透明度从 1 缓慢更改为 0。

我的 HTML 如下:

<div class="container-fluid bgauto"style="opacity:1;">
    <img src="img/yc.jpg" id="curtain1a" style="max-width:50%;">
    <img src="img/yc.jpg" id="curtain2a" style="max-width:50%;">
</div>

<img id="tfanonoff" class="img-responsive" src="img/fanicon.png" style="max-width:3%;cursor:pointer;"/>

我的 Jquery 如下:

$(function () {
    var hits = 0;
    $('#onoff').click(function () {
        if (hits % 2 !== 0) {
            $("#curtain1a").animate({ width: 200 }, 2000);
            $("#curtain2a").animate({ width: 191 }, 2000, function () { $(".bgauto").fadeTo({ 'opacity': '1' }, 1000); });
        }
        else {
            $("#curtain1a").animate({ width: 30 }, 2000);
            $("#curtain2a").animate({ width: 30 }, 2000, function () { $(".bgauto").css({ 'opacity': '0.8' }, 1000); });
        }
        hits++;
        return false;
    });
});

Answer 1

只是发布 css 解决方案，因为似乎没有其他人发布过它。

.fadableElement {
   opacity: 1;
   transition: opacity 2s ease-in-out;
   -moz-transition: opacity 2s ease-in-out;
   -webkit-transition: opacity 2s ease-in-out;
   }

.fadeOut {
    opacity:0;
}

您希望淡出的元素应该使用 fadableElement 类进行初始化

<div class="fadableElement" id="onoff"></div>"

当你想淡出它时，只需使用javascript添加类fadeOut即可。 .

$('#onoff').addClass('fadeOut');

删除类以使其淡入!