使用jQuery对多个元素进行交错的淡入和淡出循环

时间:2018-10-08 22:26:05

标签: javascript jquery html css

我正在尝试使用jquery为多个元素制作淡入和淡出动画。很难解释,因此我将首先输入相关代码。

WANT <- HAVE[
  HAVE[,
    if(all(is.na(ABSENCE))) .I[1] else
    if(!any(ABSENCE > 0, na.rm=TRUE)) max(.I[ABSENCE==0], na.rm=TRUE) else
    min(.I[ABSENCE > 0], na.rm=TRUE),
    by=ID
  ]$V1,
]
WANT[is.na(ABSENCE), TIME := NA_integer_]

#   ID ABSENCE TIME
#1:  1      NA   NA
#2:  2       0    3
#3:  3       1    3
#4:  4       0    2
#5:  5       1    2
#6:  6       0    3
$(document).ready(function() {
      $("#1").delay(0).animate({
        'opacity': '1'
      }, 1000);
      $("#2").delay(1000).animate({
        'opacity': '1'
      }, 1000);
      $("#3").delay(2000).animate({
        'opacity': '1'
      }, 1000);
      $("#4").delay(3000).animate({
        'opacity': '1'
      }, 1000);
    });
.hideme {
  opacity: 0;
}

此代码当前执行的操作是使容器中的四个父div各自逐一淡入。然后,我想要的是让所有具有“ first”类的div同时消失,然后使这些“ first” div中的每个div逐一淡入(就像所有父div在加载时所做的一样,但是仅“第一个” div),使div在同一时间再次消失,并无限循环。这意味着“第一” div将淡入和淡出,但是“第二” div将在第一次淡入后始终保持在屏幕上。请记住,“第一个” div不应同时淡入,而是一个接一个。我在弄清楚如何编写此代码时遇到了麻烦。

1 个答案:

答案 0 :(得分:0)

您不需要jQuery这样的东西,可以使用CSS来完成。 “第一”和“第二”必须是类,而不是id,因为id必须是唯一的。

.second {
  opacity: 1;
  animation-name: fadeInOpacity;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 1s;
}

.first {
  opacity: 1;
  animation-name: fadeInOpacity;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in;
  animation-duration: 1s;
}

@keyframes fadeInOpacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
<div class="container">
  <div id="1" class="hideme">
    <div class="first">A</div>
    <div class="second">B</div>
  </div>
  <div id="2" class="hideme">
    <div class="first">A</div>
    <div class="second">B</div>
  </div>
  <div id="3" class="hideme">
    <div class="first">A</div>
    <div class="second">B</div>
  </div>
  <div id="4" class="hideme">
    <div class="first">A</div>
    <div class="second">B</div>
  </div>
</div>