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解决方案，因为似乎没有人发布它。

.input-group-addon
{
  width: 0%;
}

您希望淡出的元素应使用fadableElement类

进行初始化

.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; }

如果您希望将其淡出，只需使用javascript添加类<div class="fadableElement" id="onoff"></div>"即可。

fadeOut

删除课程以淡入它！

Answer 2

UIView *paddingView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 5, 20)];
textView.leftView = paddingView;
textView.leftViewMode = UITextFieldViewModeAlways;

如docs中所述，$(".bgauto").fadeTo({'opacity':'1'},1000);采用以下参数：

fadeTo

所以在你的情况下它应该是这样的：

.fadeTo( duration, opacity [, complete ] )

然而，这可以用纯css完成，所以我建议你考虑这样做

Answer 3

您可以使用fadeTo()功能。此外，由于您需要同时使用效果，请不要将其置于回调中。

＆＃13;

$(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;
  });
});

＆＃13;

.bgauto {
  background-color: #aaa;
}

＆＃13;

<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;" />

＆＃13;

Answer 4

考虑到hairmot发布的pure-css解决方案，你可以完全避免jQuery使用原生的element.classList.add（）,. remove（）或.toggle（）方法。

Answer 5

我在 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;
   };

Answer 6

在jQuery中使用.fadeIn和.fadeOut函数

$(document).ready(function () {
  setTimeout(function () {
    $('.background').fadeOut();
  }, 1000);

  setTimeout(function () {
    $('.background').fadeIn();
  }, 3000);
});

.background {
  background: url('http://lorempixel.com/200/200/') no-repeat center center;
  width: 200px;
  height: 200px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="background"></div>

需要更改不透明度：使用jquery动画缓慢地0到1

6 个答案: