Fade In Fade Out Using Dynamic Range Input Speed And Repeat

am Trying to control the speed and repeat of my fade in fade out div using range buttons but i am confused how to do this .please help me if you have any idea.Here is my code. &l

Solution 1:

Button Method (jsfiddle)

First we'll make some buttons in your 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>

Next, we'll bind click handlers on the buttons to change some variables that will replace the static millisecond values you are using in your function.

$(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 Range Input Method (jsfiddle)

First we'll make the range input in your HTML with a default value and range limitations.

<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>

Next, we'll bind a change handler on the range input to change the faderSpeed variable which is used as the speed in the fade animations. If you wanted a different value for the fadeOut speed, you could either do some computation or add a second range input.

$(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();
});

Solution 2:

It is not clear too much, But you want the div will fadeout having an index

Like :

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>

Here is live demo http://jsfiddle.net/Ntk6a/