Question

我试图制作一个包含150px高和150px宽的子div的'毯子'。

我希望每个孩子div在一毫秒左右之后逐渐淡出，不透明度从0变为1.

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

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/。它有一个错开/错开的动作，完全符合你的要求。 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

您可以使用以下实现作为示例。使用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
  }
});

Answer 5

请注意，为了使元素实际淡入，必须首先将其隐藏，即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循环中的子句用分号分隔，而不是用逗号分隔。

使用jQuery逐个淡出框1

5 个答案: