1

私はいくつかのアイテムのリストを持っています.1つずつfadeIn要素が必要です.つまり、最初の要素がfadeInを完了し、次に次の要素fadeInなどを完了すると、与えられたコードで何がうまくいかないのかわからない.

HTML

<ul id="ulfade"><li>ABC</li><li>ABC</li><li>ABC</li><li>ABC</li></ul>

JS

var i=0;
$('#ulfade li:nth-child(' + i + ')').fadeIn(500, function () {
     $('#ulfade li:nth-child(' + (++i) + ')').fadeIn('slow');
});

jsFiddle: http://jsfiddle.net/subhash9/suUHD/2/

4

2 に答える 2

3

次のように解決できます。

$('#ulfade li').each(function(key, value) {
    $(value).delay(key * 500).fadeIn(500);
});

デモ

購入前にお試しください

編集

フィドルを変更したので、他の要素をホバーするときに機能するソリューションを次に示します。

$('#divFade').mouseover(function() {
    $('#ulfade li').each(function(key, value) {
        $(value).delay(key * 500).fadeIn(500);
    });

    $(this).unbind();
});

デモ 2

購入前にお試しください

于 2013-09-07T14:57:07.623 に答える
0

delay次のようにして、使用せずにそれを行うこともできます。

$('#divFade').mouseover(function() {
    var i = 0;
    var list = $('#ulfade li');
    (function displayLI() {  
         list.eq(i++).fadeIn(500, displayLI);  
    })();  

    $(this).unbind();
});

これは、完了コールバックを使用して、リスト内の次の項目を繰り返しフェードインします。

デモ

于 2013-09-07T17:32:24.757 に答える