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