0

範囲ボタンを使用してフェードイン フェードアウト div の速度と繰り返しを制御しようとしていますが、これを行う方法がわかりません。何か考えがあれば助けてください。ここに私のコードがあります。 

<script>
$(document).ready(function(){
    var faderIndex = 0,
    faders = $('.fadey');
    function nextFade() {
        $(faders[faderIndex]).fadeOut(2000, function() {
            faderIndex++;
            if (faderIndex >= faders.length)
                faderIndex = 0;
            $(faders[faderIndex]).fadeIn(3000, nextFade);
        });
    }
    nextFade();
});
</script>
<body id="d1" style="text-align:center" >
    <div class="fadey"></div>
</body>
4

2 に答える 2

0

あまり明確ではありませんが、インデックスを持つdivがフェードアウトする必要があります

お気に入り ：

脚本

$(document).ready(function(){
    var faderIndex = 1,
    faders = $('.fadey');
    function nextFade(faderIndex) {
        $(faders).eq(faderIndex).fadeOut(2000, function() {
            faderIndex++;
            if (faderIndex >= faders.length)
                faderIndex = 0;
            $(faders).eq(faderIndex).fadeIn(3000, nextFade);
        });
    }
    nextFade(faderIndex);
});

HTML

<div class="fadey">fadey 1</div>
<div class="fadey">fadey dfdsfd sdsf sdfds f</div>

ここにライブデモがありますhttp://jsfiddle.net/Ntk6a/

于 2013-02-08T11:11:53.273 に答える
0

ボタンメソッド ( jsfiddle )

まず、HTML にいくつかのボタンを作成します。

<button id="fast">Fast</button>
<button id="normal">Normal</button>
<button id="slow">Slow</button>
<div id="fadey1" class="fadey"></div>
<div id="fadey2" class="fadey"></div>

次に、ボタンにクリック ハンドラーをバインドして、関数で使用している静的なミリ秒値を置き換えるいくつかの変数を変更します。

$(document).ready(function () {
    var faderIndex = 0,
        faderOutSpeed = 2000,
        faderInSpeed = 3000,
        faders = $('.fadey');

    $('button#fast').click(function () {
        faderOutSpeed = 200;
        faderInSpeed = 300;
    });

    $('button#normal').click(function () {
        faderOutSpeed = 600;
        faderInSpeed = 900;
    });

    $('button#slow').click(function () {
        faderOutSpeed = 2000;
        faderInSpeed = 3000;
    });

    function nextFade() {
        $(faders[faderIndex]).fadeOut(faderInSpeed, function () {
            faderIndex++;
            if (faderIndex >= faders.length) faderIndex = 0;
            $(faders[faderIndex]).fadeIn(faderOutSpeed, nextFade);
        });
    }
    nextFade();
});

HTML5 範囲入力メソッド ( jsfiddle )

最初に、デフォルト値と範囲制限を使用して、HTML に範囲入力を作成します。

<input id="range" type="range" value="2000" min="200" max="4000" step="200" />
<div id="fadey1" class="fadey"></div>
<div id="fadey2" class="fadey"></div>

次に、範囲入力に変更ハンドラーをバインドしてfaderSpeed、フェード アニメーションで速度として使用される変数を変更します。速度に別の値が必要な場合はfadeOut、計算を行うか、2 つ目の範囲入力を追加することができます。

$(document).ready(function () {
    var faderIndex = 0,
        faderSpeed = getRangeValue(),
        faders = $('.fadey');

    $('input#range').change(function () {
        faderSpeed = getRangeValue();
    });

    function getRangeValue() {
        return parseInt($('input#range').val(), 10);
    }

    function nextFade() {
        $(faders[faderIndex]).fadeOut(faderSpeed, function () {
            faderIndex++;
            if (faderIndex >= faders.length) faderIndex = 0;
            $(faders[faderIndex]).fadeIn(faderSpeed, nextFade);
        });
    }
    nextFade();
});
于 2013-02-08T11:36:59.543 に答える