我希望文本使用jQuery逐渐淡入。
这就是我要做的。
Head -> 0.5s wait -> Body -> 0.5s wait -> Foot -> 0.5s ->Head1 ->... ->
body3 -> 0.5s wait -> Foot2
这是我的代码
$(document).ready(function() {
for (var $i = 1; $i <= 3; $i++) {
show($i);
setTimeout(function() {}, 3000);
$('.group-a .target' + $i).removeClass('acitve');
}
});
function show($index) {
var target;
setTimeout(function() {
target = $('.group-a .target' + $index).addClass('active');
}, 1000);
}.group-a {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.group-a .target1>* {
transition: transform 1s, opacity 1s;
transform: translateY(100%);
opacity: 0;
}
.group-a .target2>* {
transition: transform 1s, opacity 1s;
transform: translateY(100%);
opacity: 0;
}
.group-a .target3>* {
transition: transform 1s, opacity 1s;
transform: translateY(100%);
opacity: 0;
}
.group-a .target1 .part-1 {
transition-delay: 0.5s
}
.group-a .target1 .part-2 {
transition-delay: 1s;
}
.group-a .target1 .part-3 {
transition-delay: 1.5s;
}
.group-a .target1.active>* {
transform: translateY(0);
opacity: 1;
}
.group-a .target2.active>* {
transform: translateY(0);
opacity: 1;
}
.group-a .target3.active>* {
transform: translateY(0);
opacity: 1;
}
.group-a .target2 .part-1 {
transition-delay: 0.5s
}
.group-a .target2 .part-2 {
transition-delay: 1s;
}
.group-a .target2 .part-3 {
transition-delay: 1.5s;
}
.group-a .target3 .part-1 {
transition-delay: 0.5s
}
.group-a .target3 .part-2 {
transition-delay: 1s;
}
.group-a .target3 .part-3 {
transition-delay: 1.5s;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="group-a">
<div class="target1">
<div class="part-1">Head</div>
<div class="part-2">Body</div>
<div class="part-3">Foot</div>
</div>
<div class="target2">
<div class="part-1">Head1</div>
<div class="part-2">Body1</div>
<div class="part-3">Foot1</div>
</div>
<div class="target3">
<div class="part-1">Head2</div>
<div class="part-2">Body2</div>
<div class="part-3">Foot2</div>
</div>
</div>
</body>
</html>您在css中编写了太多代码，这不是必需的。向所有目标div添加相同的类以减少代码，并使用each（） jQuery在每个元素和窗口setTimeout（）中添加类以进行延迟
$(".target").each(function(i) {
setTimeout(function() {
$('.group-a .target').eq(i).addClass('active');
}, i * 3000);
}).group-a {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.group-a .target>* {
transition: transform 1s, opacity 1s;
transform: translateY(100%);
opacity: 0;
}
.group-a .target .part-1 {
transition-delay: 0.5s
}
.group-a .target .part-2 {
transition-delay: 1s;
}
.group-a .target .part-3 {
transition-delay: 1.5s;
}
.group-a .target.active>* {
transform: translateY(0);
opacity: 1;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="group-a">
<div class="target1 target">
<div class="part-1">Head</div>
<div class="part-2">Body</div>
<div class="part-3">Foot</div>
</div>
<div class="target2 target">
<div class="part-1">Head1</div>
<div class="part-2">Body1</div>
<div class="part-3">Foot1</div>
</div>
<div class="target3 target">
<div class="part-1">Head2</div>
<div class="part-2">Body2</div>
<div class="part-3">Foot2</div>
</div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句