Javascript 需要使用jquery将不透明度：0缓慢更改为1，并使用动画

我正在处理的动画，其中包括窗帘打开和关闭动画。 在这篇文章中，我使用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;"/>

如中所述，

fadeTo

采用以下参数：

.fadeTo( duration, opacity [, complete ] )

因此，在您的情况下，它应该如下所示：

$(".bgauto").fadeTo(1000, 1);

但是，这可以用纯粹的CSS来完成，所以我建议你考虑做< /P> 如中所述，

fadeTo

采用以下参数：

.fadeTo( duration, opacity [, complete ] )

因此，在您的情况下，它应该如下所示：

$(".bgauto").fadeTo(1000, 1);

---

<>但是，这可以用纯CSS来完成，所以我建议您考虑使用< < /P> < P>使用<代码> .FADEI< <代码> > <代码> .jQuery

中的FADEOUT 函数

$（文档）.ready（函数（）{
setTimeout（函数（）{
$（'.background'）.fadeOut（）；
}, 1000);
setTimeout（函数（）{
$（'.background'）.fadeIn（）；
}, 3000);
});
.background{
背景：url（'http://lorempixel.com/200/200/“）无重复中心；
宽度：200px；
高度：200px；
}
在jQuery中使用
.fadeIn
和
.fadeOut
函数


$（文档）.ready（函数（）{
setTimeout（函数（）{
$（'.background'）.fadeOut（）；
}, 1000);
setTimeout（函数（）{
$（'.background'）.fadeIn（）；
}, 3000);
});
.background{
背景：url（'http://lorempixel.com/200/200/“）无重复中心；
宽度：200px；
高度：200px；
}
您可以使用
fadeTo（）
功能。另外，由于您同时需要这些效果，所以不要将其放在回调中


$（函数（）{
var=0；
$（'#onoff'）。单击（函数（）{
如果（命中%2！==0）{
$（“#curtain1a”）。制作动画({
宽度：200
}, 2000);
$（“#curtain2a”）。制作动画({
宽度：191
}, 2000);
美元（“.bgauto”）.fadeTo（1000,1）；
}否则{
$（“#curtain1a”）。制作动画({
宽度：30
}, 2000);
$（“#curtain2a”）。制作动画({
宽度：30
}, 2000);
美元（“.bgauto”）.fadeTo（1000,0）；
}
hits++；
返回false；
});
});
.bgauto{
背景色：#aaa；
}
您可以使用
fadeTo（）
功能。另外，由于您同时需要这些效果，所以不要将其放在回调中


$（函数（）{
var=0；
$（'#onoff'）。单击（函数（）{
如果（命中%2！==0）{
$（“#curtain1a”）。制作动画({
宽度：200
}, 2000);
$（“#curtain2a”）。制作动画({
宽度：191
}, 2000);
美元（“.bgauto”）.fadeTo（1000,1）；
}否则{
$（“#curtain1a”）。制作动画({
宽度：30
}, 2000);
$（“#curtain2a”）。制作动画({
宽度：30
}, 2000);
美元（“.bgauto”）.fadeTo（1000,0）；
}
hits++；
返回false；
});
});
.bgauto{
背景色：#aaa；
}
只是发布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类初始化

“

当您想要淡出时，只需使用javascript添加类
fadeOut

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

删除类以使其淡入！
只需发布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类初始化

“

当您想要淡出时，只需使用javascript添加类
fadeOut

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

移除类以使其淡入
 考虑到hairmot发布的纯css解决方案，您可以完全避免使用本机元素.classList.add（），.remove（）或.toggle（）方法进行jQuery。
考虑到hairmot发布的纯css解决方案，您可以完全避免使用本机元素.classList.add（），.remove（）或.toggle（）进行jQuery方法。
我在Firefox中测试了这个。这是新的javascript动画API。它在引擎盖下使用与CSS相同的引擎

document
   .querySelector(".class-name")
   .animate({ opacity: [0, 1] }, { duration: 2000, iterations: 1, easing: "ease-in" })
   .onfinish = (e) => {
        e.target.effect.target.style.opacity = 1;
   };

我在Firefox中测试了这个。这是新的javascript动画API。它在引擎盖下使用与CSS相同的引擎

document
   .querySelector(".class-name")
   .animate({ opacity: [0, 1] }, { duration: 2000, iterations: 1, easing: "ease-in" })
   .onfinish = (e) => {
        e.target.effect.target.style.opacity = 1;
   };

提供一个工作示例。我一直建议使用CSS而不是JS制作动画，这对性能更好。你不应该为此使用jQuery。使用本机CSS动画。您的示例中的jQuery部分只是在元素上添加/删除类。请提供一个工作示例。我始终建议使用CSS而不是JS制作动画，这对性能有好处。您不应该为此使用jQuery。使用本机CSS动画。示例中的jQuery部分只是在元素上添加/删除类。我需要在帘幕打开时缓慢增加不透明度，在帘幕关闭时缓慢降低不透明度。我需要在帘幕打开时缓慢增加不透明度，在帘幕关闭时缓慢降低不透明度。