如何淡化第一個元素並延遲2秒然后淡化下一個元素?

[英]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 ?

如何淡化第一個元素並延遲2秒然后淡化下一個元素?

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

在我的代碼中,它將延遲2秒,然后在一次中淡化所有元素。

How can i do ?

我能怎么做 ?

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

6 个解决方案

#1


1  

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

您將超時設置為2秒,然后淡入元素而沒有任何延遲循環,因此它不是您想要的。

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

想法是在setTimeout延遲之后調用下一個迭代函數:

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);
        }
    })();
});

#2


1  

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

一種選擇是使用.delay函數。 .fadeIn默認位於效果隊列中:

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

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

小提琴:http://jsfiddle.net/mnh84ymk/

#3


0  

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

這是一個非常簡單的編程問題。如果你很了解C,你就不會在這里問過它。

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

#4


0  

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);
            });
    }
});

#5


0  

try

嘗試

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

         })(i)
     }
 });

DEMO

#6


0  

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

我為你做了這個: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>


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2014/10/07/729d58a652495f29e5cc34796f751aad.html



 
粤ICP备14056181号  © 2014-2020 ITdaan.com