Question

看看这个fiddle。我有一系列div，其中一些可能有css不透明动画。如果我单击淡入淡出按钮，效果在带有css不透明度动画的div中看起来很奇怪：它们不会淡入淡出，而是直接以给定的不透明度值开始。

是否可以从不透明度值设置为零开始每个div fadeIn？

<div id="container">
  <div class="asd red"></div>
  <div class="asd orange"></div>
  <div class="asd green"></div>
  <div class="asd blue"></div>
  <div class="asd magenta"></div>
  <div class="asd yellow"></div>
  <div class="asd red"></div>
  <div class="asd orange"></div>
  <div class="asd green"></div>
  <div class="asd blue"></div>
  <div class="asd magenta"></div>
  <div class="asd yellow"></div>
  <div class="asd red"></div>
  <div class="asd orange"></div>
  <div class="asd green"></div>
  <div class="asd blue"></div>
  <div class="asd magenta"></div>
  <div class="asd yellow"></div>
</div>
<div>
  <input type="button" id="fade" value="fade" />
</div>

Css代码：

body {
  background:#404040;
}

.asd {
  float:left;
  display:block;
  width:50px;
  height:50px;
}

.red {
  background-color: red;
}
.orange {
  background-color: orange;
}
.green {
  background-color: green;
  animation:opacityChange 2s infinite;
    -webkit-animation:opacityChange 2s infinite; /* Safari and Chrome */
}
.blue {
  background-color: blue;
}
.magenta {
  background-color: magenta;
}
.yellow {
  background-color: yellow;
}

@keyframes opacityChange {
    0%      {opacity:1;}
    50%     {opacity:0.5;}
    100%    {opacity:1;}
}

@-webkit-keyframes opacityChange { /* Safari and Chrome */
    0%      {opacity:1;}
    50%     {opacity:0.5;}
    100%    {opacity:1;}
}

jQuery代码：

$("#fade").click(function() {
  $(".asd").hide();
  $(".asd").fadeIn(1000);
});

Answer 1

你可以这样做

http://jsfiddle.net/4HvZk/2/

$("#fade").click(function() {
    $(".asd").hide().removeClass('ani').fadeIn(1000, function() {
        $('.green').addClass('ani');
    });
});

CSS

.green {
  background-color: green;
}
.ani {
  background-color: green;
  animation:opacityChange 2s infinite;
    -webkit-animation:opacityChange 2s infinite; /* Safari and Chrome */
}

将动画css与背景颜色分开，以便您可以更好地控制它

fade与css不透明度动画结合使用

1 个答案: