1

クラス名に基づいて個別の要素のスタックをロードする JavaScript があります。ただし、それぞれに 1 秒の遅延を追加したいので、それらはすべて次々に表示されます。

したがって、i1が最初にロードされ、次にi2がロードされます...

私のコードでこれを達成するにはどうすればよいですか?

<script>
jQuery(function($){

var i1 = $(".one"),
i2 = $(".two"),
i3 = $(".three");
i4 = $(".four");
i5 = $(".five");
i6 = $(".six");

$('.field').animate( {
marginTop:"0"
},600, function () {
i1.animate({
"opacity": 1
}),             
i2.animate({
"opacity": 1
}),     
i3.animate({
"opacity": 1
}),     
i4.animate({
"opacity": 1
})      
i5.animate({
"opacity": 1
}),     
i6.animate({
    "opacity": 1
}, 500);
});             

});
</script>

これについて何か助けてくれてありがとう:)

4

6 に答える 6

0

少し再帰を使用し、よりクリーンな実装のためにコールバックを使用したいと思います（私の考えでは..）

var oneByOne = function($el) {
    $el.fadeIn(600, function() {
        if (!$el.next().length == 0)
            oneByOne($el.next());
    });
};
$first = $('#one-by-one').children().first();
oneByOne($first);

http://jsfiddle.net/mikecmpbll/sbwMx/

または、引き続き再帰を使用しますが、代わりにアイテムの配列を操作します。

var oneByOne = function(arr) {
    $el = $(arr.shift());
    $el.fadeIn(600, function() {
        if (!$el.next().length == 0)
            oneByOne(arr);
    });
};
arr = $("#one-by-one").children().get();
oneByOne(arr);

http://jsfiddle.net/mikecmpbll/sbwMx/1/

于 2013-06-06T15:30:53.770 に答える
0

遅延を設定するために使用できる要素のインデックスを提供するため、これを支援するためにjQuery のeachメソッドを使用するのが好きです。delay

jQuery(function () {
  var animation_items = [
        ".one", ".two", ".three", ".four", ".five", ".six"
      ];

  $.each(animation_items, function(index, item) {
    $(item).delay(index * 1000).animate({
      opacity: 1
    }, 500);
  });
});

また、すべてを個別に指定するのではなく、特定のクラスで動作するという追加のボーナスも得られます。これにより、すべてがより一般的になり、保守が容易になります。JavaScript を編集しなくても、HTML に別の div を追加するだけです。

<div class="fade_in"></div>
<div class="fade_in"></div>
<div class="fade_in"></div>


jQuery(function () {
  var delay = 1000;

  $('.fade_in').each(function(index, item) {
    $(item).delay(index * 1000).animate({
      opacity: 1
    }, 500);
  });
});

ここにデモがあります

于 2013-06-06T14:54:11.103 に答える
0

jQuery .delay() を使用してみてください。これにより、キュー内でそれに続く関数の実行を遅らせることができます。

http://api.jquery.com/delay/

更新しました：

動作中の jsFiddle の例: http://jsfiddle.net/DylanNunns/su8jp/2/

jQuery(function ($) {
    var i1 = $(".one"),
        i2 = $(".two"),
        i3 = $(".three");
    i4 = $(".four");
    i5 = $(".five");
    i6 = $(".six");

    $('.field').animate({
        marginTop: "0"
    }, 600, function () {
        i1.delay(1000).animate({
            "opacity": 1
        }),
        i2.delay(2000).animate({
            "opacity": 1
        }),
        i3.delay(3000).animate({
            "opacity": 1
        }),
        i4.delay(4000).animate({
            "opacity": 1
        }),
        i5.delay(5000).animate({
            "opacity": 1
        }),
        i6.delay(6000).animate({
            "opacity": 1
        });
    });
});
于 2013-06-06T14:40:47.263 に答える