2 
$(document).ready(function fadeIt() {

    $("#cool_content > div").hide();

    var sizeLoop = $("#cool_content > div").length;
    var startLoop = 0;

    $("#cool_content > div").first().eq(startLoop).fadeIn(500);

    setInterval(function () {
        $("#cool_content > div").eq(startLoop).fadeOut(1000);

        if (startLoop == sizeLoop) {
            startLoop = 0
        } else {
            startLoop++;
        }

        $("#cool_content > div").eq(startLoop).fadeIn(1500);

    }, 2000);
});

ここで、div のクラスを無限にアニメーション化する必要があります。

ただし、間隔が2秒に設定されているため、divが表示されていない期間があります!

これらの div のアニメーションをループする適切な方法は何でしょうか?

for ループの使用を考えましたが、div のクラスを引数として渡す方法がわかりませんでした。あなたのすべての助けに感謝します。

ありがとう！

4

3 に答える 3

1

一般に、Javascript はシングル スレッド環境であることを知っておく必要があります。これに加えて、タイマー イベントは通常、正確に時間通りに行われません。jQuery がどのようにフェードインとフェードアウトを行っているかはわかりませんが、CSS3 トランジションを使用していない場合は、timeOut と Intervals を使用することになります。つまり、基本的に、多くのタイマーが進行中です。

これで for ループを使用すると、単一のスレッドがブロックされるため、先に進む方法ではありません。setInterval でフェードイン/アウトを自分で行う必要があります。

各インターバル コールの不透明度を設定します。お気に入りdiv.css('opacity', (opacity -= 10) + '%')

順番にフェードインおよびフェードアウトしようとしている場合は、このコードが役立つと思います

var opacity = 100,
    isFadingIn = false;
window.setInterval(function() {
    if (isFadingIn) {
        opacity += 10;
        if (opacity === 100) isFadingIn = false;
    } else {
        opacity -= 10;
        if (opacity === 0) isFadingIn = true;
    }

    $('#coolContent > div').css('opacity', opacity + '%');
}, 2000);
于 2012-12-27T14:46:58.823 に答える
0

次の JavaScript / jQuery を検討してください。

$(function(){
    var divs = $('#cool_content > div').hide();
    var curDiv;
    var counter = 0;
    var doUpdate = function(){
        // Hide any old div
        if (curDiv)
            curDiv.fadeOut(1000);

        // Show the new div
        curDiv = divs.eq(counter);
        curDiv.fadeIn(1000);

        // Increment the counter
        counter = ++counter % divs.length;
    };
    doUpdate();
    setInterval(doUpdate, 2000);
});

これは、div を無限にループします。また、DOM に div のリストを 1 回だけ照会するだけなので、コードよりも効率的です。

更新:フォークされたフィドル

于 2012-12-27T14:53:33.633 に答える
0

それ以外の

if (startLoop == sizeLoop)
{
    startLoop = 0
}
else
{
    startLoop++;
}

使用する

startLoop =(startLoop+1)%sizeLoop;

デモhttp://jsfiddle.net/JvdU9/を確認してください - 最初の div は、4 番目が消えた直後にアニメーション化されています。

UPD: あなたの質問を理解できていないかどうかわかりませんが、答えてみます :) フレーム数は自動的に計算されるため、ループされている div の数は 4、5、10 のいずれでも構いません。

x=(x+1)%nは:およびxよりも大きくなることはありません。n-1x>=0x<n

x=(x+1)%nは単に短縮されたものです

if(x<n-1)
    x++;
else
    x=0;

私にとっては、最初のバリアントは非常に読みやすいです:)
そして、申し訳ありませんが、前回は間違ったデモを提供しました。正しいもの - http://jsfiddle.net/JvdU9/2/

于 2012-12-27T15:01:13.580 に答える