Javascript, local copying of a variable value ... struggling to achieve it

Question

I have what I thought was a simple javascript / jquery function (disappear from one div, disappear into another ... loop until it reaches its maximum and then starts from the very beginning. Fadein of the next div I need to increase the global counter. By doing this is doubled in increments, because I assume that the local variable I created supports the same reference to the global variable.

Below is the sample code below. Can someone determine what I am doing wrong?

var current_index = 1;

$(document).ready(function() {
    $(function() {
        setInterval("selectNextStep()", 3000);
    });
});

function selectNextStep() {
    $("#step_"+current_index).fadeOut('slow', function() {
        var next = current_index;
        next = next + 1;
        $("#step_"+next).fadeIn('slow', function() {
            if (current_index == 4) current_index = 1;
            else current_index ++;
        });
    });
}

Answer 1

, - , , , . fade .

0 .

var current_index = 0; // zero indexes makes math easier

$(document).ready(function () {
    $(function () {
      // use timeout instead of interval, the fading callbacks will 
      // keep the process going
        setTimeout(selectNextStep, 3000);
    });
});

function selectNextStep() {

  // +1 to adapt index to element id
    $("#step_" + (current_index + 1)).fadeOut('slow', function () {

        var next = current_index + 1;

       // keeps index in range of 0-3
        next = next % 4; // assuming you have 4 elements?
        current_index = (current_index + 1) % 4; 

      // callback will start the next iteration
        $("#step_" + (next + 1)).fadeIn('slow', function () {
            setTimeout(selectNextStep, 3000);
        });

    });
}

demo: http://jsbin.com/exufu

Answer 2

, ...

, next 4, , -, , , . , currentIndex, .

if (next > 4 ) next = 1; next

http://jsfiddle.net/5zeUF/

Answer 3

$(function() {}); , $(document).ready(function() {}), selectNextStep ( )?

Answer 4

. . ( ) current_index fadeIn().

: http://jsfiddle.net/r7BFR/

var current_index = 1;

function selectNextStep() {
    $("#step_" + current_index).fadeOut('slow', function() {
        current_index++;
        if (current_index > 4) current_index = 1;
        $("#step_" + current_index).fadeIn('slow');
    });
}

$(document).ready(function() {
    setInterval(selectNextStep, 3000);
});

EDIT: ​​ (camelCase) current_index.

:

current_index = (current_index % 4) + 1;

Answer 5

, , , , , script ()

[HTML]

​<div class="step defaultStep">One</div>
<div class="step">Two</div>
<div class="step">Three</div>
<div class="step">Four</div>
<div class="step">Five</div>

[CSS]

.step { display: none; }
.defaultStep { display: block; }​

[JS]

$( function() {
    var steps = $( ".step" );
    var interval = setInterval( function( ) {
        var current = $( ".step" ).filter( ":visible" ), next;
        if( current.next( ).length !== 0 ) {
            next = current.next( );
        } else {
            next = steps.eq(0);
        }
        current.fadeOut( "slow", function( ) {
             next.fadeIn( "slow" );  
        } );
    }, 3000);
} );

Answer 6

, jquery. . , .

http://jquery.malsup.com/cycle/

. , :

$(document).ready(function() {
    var current_index = 0;

    window.setInterval(function() {
        $("#step_"+ current_index).fadeOut('slow', function() {
            $("#step_" + (current_index + 1)).fadeIn('slow', function() {
                current_index = (current_index + 1) % 4;
            });
        });
    }, 3000);
});

. current_index, . , , , setInterval, - .

P.S. , , #step_ ID 0.