1

高さ150px、幅150pxの子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();
    }
});
4

5 に答える 5

2

これが実用的なソリューションです。

コードの問題

  • ではfor(i = 0, i < 30, i++)、「,」ではなく「;」を使用する必要があります。ブラウザで開発者ツールを使用して、そのようなタイプミスを見つけます
  • コード$('div').append(figure[].clone()).fadeIn();では、fadeInappend() が呼び出し元のオブジェクト自体を返すため、 $('div') に適用されます。それを置き換えて、$('<figure></figure>').appendTo('div').fadeIn('slow');アイテムを1つずつフェードインする必要があります。遅延を増やしてタイムアウトを設定できます
  • display: none;Figure にスタイルを追加して、最初は非表示のままにします

これが完全なコードです。

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

http://jsfiddle.net/CCawh/12/が動作していることを確認するためのフィドルは次のとおりです。

于 2013-08-09T15:49:49.210 に答える
1

これは可能な解決策です（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();
        });
    })();

});
于 2013-08-09T15:14:55.610 に答える
1

greensock TweenLite http://www.greensock.com/get-started-js/を使用してみてください。あなたが求めていることを正確に行う staggerTo/staggerFrom アクションがあります。TweenLite と jQuery を組み合わせると、アニメーションが非常に簡単になります。

于 2013-08-09T15:14:20.397 に答える
0

次の実装を例として使用できます。を使用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
  }
});
于 2013-08-09T15:20:13.923 に答える
0

要素が実際にフェードインするには、最初に非表示にする必要があることに注意してください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 ループ内の節は、コンマではなくセミコロンを使用して区切ります。

于 2013-08-09T15:26:28.770 に答える