javascript - 使用 jQuery 逐个淡入框 1

Question

我试图制作一个包含 150 像素高和 150 像素宽的子 div 的 div 的“毯子”。

我希望每个子 div 在大约一毫秒后依次淡入 1，不透明度从 0 变为 1。

我似乎无法弄清楚这是如何工作的，或者我是如何做到的？

http://jsfiddle.net/CCawh/

JS

$(function(){
    var figure = [];
    w = 1500;
    h = 450;
    for(i = 0, i < 30, i++){
        $('div').append(figure[].clone()).fadeIn();
    }
});

Answer 1

这是一个有效的解决方案。

您的代码中的问题

• 在 中for(i = 0, i < 30, i++)，您应该使用 ';'，而不是 ',' 。使用浏览器中的开发人员工具来捕获此类拼写错误
• 在您的代码$('div').append(figure[].clone()).fadeIn();中，fadeIn适用于 $('div') 作为 append() 返回调用对象本身。您必须将其替换为$('<figure></figure>').appendTo('div').fadeIn('slow');并逐个淡入淡出项目，您可以设置超时并增加延迟
• 为图形添加display: none;样式以使其最初隐藏

这是完整的代码。

$(function(){
    for(i = 0; i < 30; i++){
        setTimeout(function(){$('<figure></figure>').appendTo('div').fadeIn('slow');}, i*200);
    }
});

这是一个可以看到它工作的小提琴http://jsfiddle.net/CCawh/12/

Answer 2

尝试使用 greensock TweenLite http://www.greensock.com/get-started-js/。它具有 staggerTo/staggerFrom 动作，完全符合您的要求。TweenLite 与 jQuery 结合使动画变得非常容易。

Answer 3

这将是一个可能的解决方案（DEMO）。

使用立即函数并在fadeIn 回调中再次调用它n次。

$(function(){
    var figure = $('figure');

    var counter = 0;
    (function nextFade() {
        counter++;
        figure.clone().appendTo('div').hide().fadeIn(500, function() {
            if(counter < 30) nextFade();
        });
    })();

});

Answer 4

请注意，为了使元素真正淡入，它必须首先隐藏，即display: none;或.hide()

这可能是一个没有计数器的更强大的解决方案：http: //jsfiddle.net/CCawh/6/

for(var i = 0; i < 30; i++){
    $('div').append($('<figure>figure</figure>'));
}

(function fade(figure, duration) {
    if (figure) 
        figure.fadeIn(duration, function() { fade(figure.next(), duration); });
})($('figure').first(), 400);

顺便说一句，for 循环中的子句使用分号而不是逗号分隔。

Answer 5

您可以使用以下实现作为示例。使用setTimeout()就可以了。

我在这里更新了你的 jsfiddle：http: //jsfiddle.net/CCawh/5/

HTML：

<div class="container">
    <div class="box"></div>
</div>

CSS：

.box {
    display: none;
    float: left;
    margin: 10px;
    width: 150px;
    height: 150px;
    background-color: #000;
}

JS：

$(function() {
  var box = $('.box');
  var delay = 100;

  for (i = 0; i < 30; i++) {
    setTimeout(function() {
      var new_box = box.clone();
      $('.container').append(new_box);
      new_box.fadeIn();
    }, delay);

    delay += 500; // Delay the next box by an extra 500ms
  }
});