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速度值，您可以进行一些计算或添加第二个范围输入。

$(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 回答