Fade in fade out using dynamic range input speed and Repeat

Question

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.

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

@user1537158 for this code i am trying to give fade in speed using range input — user2024102, Feb 08 '13 at 11:04

score 0 · Answer 1 · answered Feb 08 '13 at 11:11

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/

Ruben Infante · Accepted Answer · 2013-02-08T12:26:39.147

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

thank you @Ruben infante yes your code works fine , i am trying to do this using range button . — user2024102, Feb 08 '13 at 11:41
@user2024102 I updated my answer with a second method using a range input. — Ruben Infante, Feb 08 '13 at 12:28
Infanate Wow.. you are really cool . can i add repeat a single div alone for N number of times using user input — user2024102, Feb 08 '13 at 12:38
@user2024102 See if you can use what I have provided so far and try out a few things to see how far you get. If you still have trouble, you may want to create a new question and try to be specific about what you tried and exactly what result you are trying to achieve. — Ruben Infante, Feb 08 '13 at 12:46

Fade in fade out using dynamic range input speed and Repeat

2 Answers2

Linked