CODEWITHSUNDEEP
javascriptjquery
servicere newerver
servicere newerver

Reputation: 23

How to fadein first element and delay 2 sec then fadein next elements?

How to fadein first element and delay 2 sec then fadein next elements ?

On my code , it's will delay 2 sec and then fadein all elements in one time.

How can i do ?

<script>
  $(document).ready(function(){
    setTimeout(function(){
        for (i = 0; i < 40; i++){
            $("#thumbnail" + i).fadeIn("slow");
        }
    }, 2000);
  });
</script>

Upvotes: 2

Views: 74

Answers (6)

Giannis Grivas
Giannis Grivas

Reputation: 3412

I made this for you : http://jsfiddle.net/csdtesting/eym6ennz/

var i = "1";
var testimonialElements = $('div');


$('#link').click(function() {
  $('#thumbnail' + i).fadeIn('fast', function() {
    setTimeout(function() {
      console.log('#thumbnail' + i);
      for (i = 2; i <= testimonialElements.length; i++) {
        var element = testimonialElements.eq(i);
        $('#thumbnail' + i).fadeIn(1000);
      }
    }, 2000);
  });
})
#thumbnail1 {
  height: 30px;
  width: 30px;
  background: green;
  display: none;
}
#thumbnail2 {
  height: 30px;
  width: 30px;
  background: red;
  display: none;
}
#thumbnail3 {
  height: 30px;
  width: 30px;
  background: black;
  display: none;
}
#thumbnail4 {
  height: 30px;
  width: 30px;
  background: grey;
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="thumbnail1"></div>
<div id="thumbnail2"></div>
<div id="thumbnail3"></div>
<div id="thumbnail4"></div>
<a href="#" id="link">click me to fade in</a>

Upvotes: 0

Stryner
Stryner

Reputation: 7328

One option would be to use the .delay function. .fadeIn is in the effects queue by default:

$(document).ready(function(){
    for (i = 0; i < 40; i++){
        $("#thumbnail" + i).delay(2000*i).fadeIn("slow");
    }
});

Fiddle Here: http://jsfiddle.net/mnh84ymk/

Upvotes: 1

Balachandran
Balachandran

Reputation: 9637

try

 $(document).ready(function () {
     for (i = 0; i < 40; i++) {
         (function (i) {
             setTimeout(function () {
                 $("#thumbnail" + i).fadeIn("slow");
             }, i * 2000);

         })(i)
     }
 });

DEMO

Upvotes: 0

Kir
Kir

Reputation: 155

Use delay with callback:

$(document).ready(function () {
    fadeInWithDelay(40);

    function fadeInWithDelay(times) {
        if(times == 0) return;
        $('#thumbnail' + i)
            .fadeIn('slow')
            .delay(2000)
            .queue(function (next) {
                fadeInWithDelay(--times);
            });
    }
});

Upvotes: 0

user1741851
user1741851

Reputation:

This is a very simple programming question. If you know C pretty well, you wouldn't have asked it here.

<script>
    $(document).ready(function(){
        $("#thumbnail0").fadeIn("slow");
        setTimeout(function(){
            for (i = 1; i < 40; i++){
                $("#thumbnail" + i).fadeIn("slow");
            }
        }, 2000);
    });
</script>

Upvotes: 0

Regent
Regent

Reputation: 5178

You set timeout for 2 seconds and then fade in elements without any delays in loop, so it is not what you want.

The idea is to call next iteration function after setTimeout delay:

Fiddle.

$(document).ready(function()
{
    var i = 0;
    (function fadeInNext()
    {
        $("#thumbnail" + i).fadeIn("slow");
        console.log("Fading in " + i);
        i++;
        if (i < 40)
        {
            setTimeout(fadeInNext, 2000);
        }
    })();
});

Upvotes: 1

Related Questions