Question

我正在尝试使用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不应同时淡入，而是一个接一个。我在弄清楚如何编写此代码时遇到了麻烦。

Answer 1

您不需要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>

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

1 个答案: