Question

我希望使用jQuery按顺序淡入文本。

这就是我想要做的。

Head -> 0.5s wait -> Body -> 0.5s wait -> Foot -> 0.5s ->Head1 ->... -> 
body3 -> 0.5s wait -> Foot2

这是我的代码

＆＃13;

$(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);
}

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

你在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>

我希望文本按顺序出现

1 个答案: