CODEWITHSUNDEEP
javascriptjqueryhtmlcss
koboso
koboso

Reputation: 55

I want the text to appear in sequence

I want the text to fade-in in sequence 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>

Upvotes: 4

Views: 118

Answers (1)

Bhuwan
Bhuwan

Reputation: 16855

You have written too much code in css which is not required. Add a same class to all the target divs to reduce the code and use each() jQuery to add class in each element and window setTimeout() for 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>

Upvotes: 2

Related Questions