CODEWITHSUNDEEP
javascriptjquerycss
Manish Kumar
Manish Kumar

Reputation: 79

Load div on the page one by one

<script>
$(document).ready(function(){
    $( "#clr" ).each(function(i) {
    $("#clr"+id).fadeOut(0).delay(1000*i).fadeIn(1850);
   )};
});
</script>

<div class="row" id="clr">
        <a href="wishfinal/" class="custom" id="clr1"><span class="textstyle">WISHINDIA</span></a>
        <a href="shoutit/" class="custom" id="clr2"><span class="textstyle">SHOUTIT</span></a>
        <a href="snake/" class="custom" id="clr3"><span class="textstyle">SNAKE</span></a>
        <a href="test/index.php" class="custom" id="clr4"><span class="textstyle">TESTING</span></a>
        <a href="test/index.php" class="custom" id="clr5"><span class="textstyle">TESTING</span></a>
        <a href="test/index.php" class="custom" id="clr6"><span class="textstyle">TESTING</span></a>
        <a href="test/index.php" class="custom" id="clr7"><span class="textstyle">TESTING</span></a>
     </div>
   </div>

I'm trying to load div one after another with some delay but unable to do so please help to do this

Upvotes: 1

Views: 260

Answers (2)

Piterden
Piterden

Reputation: 789

Try to use callback function:

$(document).ready(function(){
    $('[id^="clr"]').each(function(i) {
        let $this = $(this);
        $this.fadeOut(0, function () {
            setTimeout(function() {
                $this.fadeIn(1850);
            }, 1000 * i);
        });
    )};
});

Upvotes: 0

Nisarg Shah
Nisarg Shah

Reputation: 14541

First of all, you would need to fix the syntax errors around the anonymous function passed to the .each function. Basically your closing ) bracket for .each should come after the closing } of the anonymous function passed to it.

Then, instead of iterating on #clr, you should be iterating over #clr > a - meaning on the anchor tags rather than the div element.

Also you don't have to specify the selector inside the .each function. You can instead refer to the elements using $(this).

Finally, you can either refer to the index of element inside .each as id or i. In the snippet below I have used id.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $("#clr > a").each(function(id) {
        $(this).fadeOut(0).delay(1000 * id).fadeIn(1850);
    });
  });
</script>

<div class="row" id="clr">
  <a href="wishfinal/" class="custom" id="clr1"><span class="textstyle">WISHINDIA</span></a>
  <a href="shoutit/" class="custom" id="clr2"><span class="textstyle">SHOUTIT</span></a>
  <a href="snake/" class="custom" id="clr3"><span class="textstyle">SNAKE</span></a>
  <a href="test/index.php" class="custom" id="clr4"><span class="textstyle">TESTING</span></a>
  <a href="test/index.php" class="custom" id="clr5"><span class="textstyle">TESTING</span></a>
  <a href="test/index.php" class="custom" id="clr6"><span class="textstyle">TESTING</span></a>
  <a href="test/index.php" class="custom" id="clr7"><span class="textstyle">TESTING</span></a>
</div>
</div>

Upvotes: 3

Related Questions