需要更改不透明度:0到1缓慢使用jquery的动画
提问于 2017-01-11 09:01:48
我正在处理动画，其中包括窗帘打开和关闭动画。在这方面，我使用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;
});
});
回答 6
Stack Overflow用户
回答已采纳
发布于 2017-01-11 09:10:31
您可以使用fadeTo()函数。另外，因为你同时需要这些效果，所以不要把它放在回调中。
$(function() {
var hits = 0;
$('#onoff').click(function() {
if (hits % 2 !== 0) {
$("#curtain1a").animate({
width: 200
}, 2000);
$("#curtain2a").animate({
width: 191
}, 2000);
$(".bgauto").fadeTo(1000, 1);
} else {
$("#curtain1a").animate({
width: 30
}, 2000);
$("#curtain2a").animate({
width: 30
}, 2000);
$(".bgauto").fadeTo(1000, 0);
}
hits++;
return false;
});
});.bgauto {
background-color: #aaa;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid bgauto">
<img src="https://placehold.it/100x100" id="curtain1a" style="max-width:50%;">
<img src="https://placehold.it/100x100" id="curtain2a" style="max-width:50%;">
</div>
<img id="onoff" class="img-responsive" src="https://placehold.it/100x100" style="max-width:3%;cursor:pointer;" />
Stack Overflow用户
发布于 2017-01-11 09:16:07
只是发布了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');移除类以使其淡入！
Stack Overflow用户
发布于 2017-01-11 09:05:02
$(".bgauto").fadeTo({'opacity':'1'},1000);正如docs中所述，fadeTo采用以下参数：
.fadeTo( duration, opacity [, complete ] )因此，在您的示例中，它应该如下所示：
$(".bgauto").fadeTo(1000, 1);但是，这可以使用纯css完成，所以我建议您考虑这样做
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41586557
复制相关文章
腾讯云开发者
