2

1 つのクラスの下にさまざまな要素があり、それらを無限ループ内でランダムにフェードインおよびフェデアアウトする必要があります。今はそれらをランダムにフェードインさせることができますが、要素をフェードアウトすることに固執しています。

もう 1 つは、fadeOut の後、再びフェードインする前に数秒遅らせたいということです。

これは私のコード スニペットです。

$(document).ready(function () {
    $('.share').each(function(i){
        var rand = 1 + Math.floor(Math.random() * 7);//max of random 7 seconds
        $(this).fadeIn(rand*1000).delay(500).fadeOut(); 
    });
});
4

3 に答える 3

3

フェード間の間隔もランダム化する場合は、これを使用できます。 

$('.share').each(function(i) {
    loopInfinitely($(this));
});

function loopInfinitely(elem) {
    var rand = 1 + Math.floor(Math.random() * 7) * 1000;//max of random 7 seconds
    setTimeout(function() {
        elem.fadeIn(rand).delay(300).fadeOut(rand);
        loopInfinitely(elem);  
    }, rand);
}

要素を順番に表示および非表示にする場合は、次を使用できます。

loopInfinitely($('.share'));

function loopInfinitely(elems) {
    var rand = 1 + Math.floor(Math.random() * 7) * 1000;//max of random 7 seconds
    setTimeout(function() {
        var i = 0;
        (function advanceElem() {
            if (elems.length <= i) {
                loopInfinitely(elems);
                return;
            }
            elems.eq(i).fadeIn(rand).delay(300).fadeOut(rand);
            setTimeout(advanceElem, rand*2+300);
            i++;
        })();
    }, rand);
}

これがどのように機能するか教えてください。

于 2012-08-07T04:11:05.947 に答える
1

通常の JavaScript タイマーを使用して、コードを定期的に呼び出すことができます。

setInterval(function() 
    { 
        $('.share').each(function(i) 
        {
             var rand = 1 + Math.floor(Math.random() * 7);//max of random 7 seconds
             $(this).fadeIn(rand*1000).delay(500).fadeOut(); 
        }) 
    },  3000);
于 2012-08-07T04:08:50.030 に答える
0

その中に関数を作り、fade_element_in()関数を作ります。次に、各関数内で Javascript の関数を使用して、希望する遅延の後に他の関数を呼び出します。ヴィオラ、無限ループ。$('.share').fadeIn()fade_element_out()setInterval

于 2012-08-07T04:08:35.507 に答える