All geek questions in one place

I want the text to be displayed sequentially

I want the text to fade out sequentially using jQuery.

This is what I want to do.

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

This is my code.

$(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>
Run code
+4
source share
1 answer

You have written too much code in css that is not required. Add the same class to all target divs to reduce the code and use each () jQuery to add a class to each element and setTimeout () window to delay 

$(".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>
Run code
+2
source

Source: https://habr.com/ru/post/1695387/

More articles:


All Articles