Skip to content Skip to sidebar Skip to footer

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

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

    functiongetRangeValue() {
        returnparseInt($('input#range').val(), 10);
    }

    functionnextFade() {
        $(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');
    functionnextFade(faderIndex) {
        $(faders).eq(faderIndex).fadeOut(2000, function() {
            faderIndex++;
            if (faderIndex >= faders.length)
                faderIndex = 0;
            $(faders).eq(faderIndex).fadeIn(3000, nextFade);
        });
    }
    nextFade(faderIndex);
});

HTML

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

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

Post a Comment for "Fade In Fade Out Using Dynamic Range Input Speed And Repeat"