Question

我正在尝试使用范围按钮来控制淡出淡出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>

Answer 1

目前尚不清楚，但是你希望div有frosout有一个索引

喜欢：

<强> SCRIPT

$(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/

Answer 2

按钮方法（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();
});

使用动态范围输入速度和重复淡入淡出淡出

2 个答案: