Animation delay using jquery

Question

Working with animation.

Here I want text come one after the other first paragraph move from left to right and fadeOut and second and so on in a loop. I tried but I didn't get properly. What might be the issue here. Can anyone suggest me?

$(document).ready(function() {
  $('#load').each(function() {
    $("div.first").slide(300).delay(800).fadeIn(400);
    $("div.second").slide(300).delay(1200).fadeIn(400);
    $("div.third").slide(300).delay(1600).fadeIn(400);
  });
});

#load {
  width: 700px;
  background-color: #ccc;
  margin: 0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="load">
  <div class="first">
    <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
  </div>
  <div class="second">
    <p>Measure & monitorIt is a long established fact that a reader will be distracted by the readable c projects</p>
  </div>
  <div class="third">
    <p>Intelligence of a page when looking at its layout.</p>
  </div>
</div>

@trincot yeah because in js something goes wrong i dont know what might be the issue here. — Husna
– Husna, Commented Jul 19, 2018 at 11:22

Karan · Accepted Answer · 2018-07-19 11:29:44Z

1

$(document).ready(function() {      
    $("div.first").toggle("slide", 300).delay(800).fadeIn(400);
    $("div.second").toggle("slide", 300).delay(1200).fadeIn(400);
    $("div.third").toggle("slide", 300).delay(1600).fadeIn(400);
});

#load {
  width: 700px;
  background-color: #ccc;
  margin: 0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="load">
  <div class="first">
    <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
  </div>
  <div class="second">
    <p>Measure & monitorIt is a long established fact that a reader will be distracted by the readable c projects</p>
  </div>
  <div class="third">
    <p>Intelligence of a page when looking at its layout.</p>
  </div>
</div>

answered Jul 19, 2018 at 11:29

Karan

12.7k3 gold badges31 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Husna Over a year ago

thanks. but I want the first paragraph to come left to right and stay 3s and then fadeOut then next second paragraph should have come.

trincot · Accepted Answer · 2018-07-19 13:36:11Z

You'll want to wait for the animations to finish before launching the next. This you can do either with a callback argument to fadeIn, or with promises. Also, jQuery does not have a slide method, so I used some CSS and animate to make that work:

$(document).ready(function() {
  var p = $.when();
  $('#load > div').each(function(i, div) {
    p = p.then(function() {  
      return $(div).animate({left:'0px'}, 300).delay(800).fadeIn(400).promise();
    });
  });
});

body {
  margin: 0;
}
#load {
  width: 700px;
  background-color: #ccc;
  margin: 0 auto;
}
#load > div {
  left: -700px;
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="load">
  <div class="first">
    <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
  </div>
  <div class="second">
    <p>Measure & monitorIt is a long established fact that a reader will be distracted by the readable c projects</p>
  </div>
  <div class="third">
    <p>Intelligence of a page when looking at its layout.</p>
  </div>
</div>

Collectives™ on Stack Overflow

Animation delay using jquery

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related