jQuery id selectors stuck while fading between

Question

I'm a jQuery/javascript newbie and I'm having an issue with jQuery which got me stuck for the past few days. It's a script that switches from 3 different divs. It does switch from the first one to the second, but it freezes the script if the random selection tries to switch from the second to the third.

html

<span class="block">
    <span class="text1 _shown">1111</span>
    <span class="text2 _hidden">2222</span>
    <span class="text3 _hidden">3333</span>
</span>
<span class="block">
    <span class="text1 _shown">1111</span>
    <span class="text2 _hidden">2222</span>
    <span class="text3 _hidden">3333</span>
</span>

css

.block{
position:relative;
display:inline-block;
}

._shown{    
position:relative;
    display:block;
}
._hidden{
    visibility: hidden;
}

Javascript

jQuery(function() {
var nbcases = $(".block").length;
var nbvignomg = $(".imgcases").length;
var i;

var chkcases = new Array();
for(var j = 0; j < nbcases-nbvignomg; j++){
chkcases.push(1);
}

function showNextTranscri() {
    i = Math.floor(Math.random()*(nbcases-nbvignomg));

    $('#texteTransis').html(chkcases);
    $('#texteTransis2').html(i);

    if(chkcases[i] == 1){
        $('.text1').eq(i).fadeOut(700, function() {
            $('.text1').eq(i).removeClass("_shown").addClass("_hidden");
            $('.text2').eq(i).removeClass("_hidden").addClass("_shown");
            chkcases[i] = 2;
            $('.text2').eq(i).hide().fadeIn(700).delay(500, showNextTranscri);
            });
    }
    if(chkcases[i] == 2){
        $('#texteTransis3').html('[x]');
        $('.text2').eq(i).fadeOut(700, function() {
            $('.text2').eq(i).removeClass("_shown").addClass("_hidden");
            $('.text3').eq(i).removeClass("_hidden").addClass("_shown");
            $('.text3').eq(i).fadeIn(700).delay(500, showNextTranscri);
            chkcases[i] = 3 ;
            });
    }
    if(chkcases[i] == 3){
        $('.text3').eq(i).fadeOut(700, function() {
            $('.text3').eq(i).removeClass("_shown").addClass("_hidden");
            $('.text1').eq(i).removeClass("_hidden").addClass("_shown");
            $('.text1').eq(i).fadeIn(700).delay(500, showNextTranscri);
            chkcases[i] = 1;
            });
    }
}

showNextTranscri();

})();

It seems to be my jQuery line that won't proceed and stucks the entire thing

 $('.caseh1#transcri2').eq(i).fadeOut(700, function() {
 $('.caseh1#transcri3').eq(i).fadeIn(700).delay(500, showNextQuote);

Thank you very much for any help you can provide.

EDIT: updated with clearer code

PhilTrep · Accepted Answer · 2013-10-18T17:00:17.130

~~HTML~~

<div id="block1" class="block">
    <span class="text1 _shown">one</span>
    <span class="text2 _hidden">two</span>
</div>
<div id="block2" class="block">
    <span class="text1 _shown">three</span>
    <span class="text2 _hidden">four</span>
</div>
<div id="block3" class="block">
    <span class="text1 _hidden">five</span>
    <span class="text2 _shown">six</span>
</div>

CSS

._shown
{
    display:block;
}
._hidden
{
    display: none;
}

JavaScript

jQuery(function(){
    var block_array = jQuery(".block");
    var used_blocks = [];

    var getBlock = function(){
        var random_block = "block"+(Math.floor(Math.random()*block_array.length)+1);
        var used = false;
        for(key in used_blocks){
            if(random_block===used_blocks[key])
                used = true;
        };
        if(!used)
            return random_block;
        else
            return getBlock();
    };
    var setBlock = function(bid){
        if(used_blocks.length===block_array.length-1)
            used_blocks=[];
        else
            used_blocks.push(bid);
    };

    var showNextQuote = function(){

        var blockId = getBlock();
        setBlock(blockId);

        var shown = jQuery("#"+blockId+" ._shown");
        var hidden = jQuery("#"+blockId+" ._hidden");
        shown.fadeOut(700, function(){
            hidden.fadeIn(700,function(){
                shown.removeClass("_shown").addClass("_hidden");
                hidden.removeClass("_hidden").addClass("_shown");
                setTimeout(showNextQuote(),500);
            });
        });
    };
    showNextQuote();
});

EDIT

Modified code to fit your explanations in this answer's comments; should be everything you need.

JSFIDDLE

Thank you very much for your answer, I didn't know you couldn't use multiple id's. But in my case, your code doesn't seem to work the way I need it : My html does have multiple divs such as : `
one_2 two_2 three_2
` You can check the URL above. Each text block has it's own id="transcrix" x3 (which is bad, ok) generated by php. I'd like jQuery to randomly select a block, switch to the next , and loop to another random block. — Nelson S, Oct 17 '13 at 09:52
@NelsonS What do you mean by *switch to the next , and loop to another random block*? — PhilTrep, Oct 17 '13 at 14:09
Made it work, I shoudl always test first :| [jsfiddle](http://jsfiddle.net/wFze2/). — PhilTrep, Oct 18 '13 at 16:20
Thanks Philippe. I think it works now, but I don't think i'll be able to make it work for the 3 different in each block: [jsfiddle (such as the html here)](http://jsfiddle.net/D7WC2/2/) — Nelson S, Oct 18 '13 at 16:46
Thanks so much, it works great. Now I need a few more days to understand what you wrote! Thanks again for your time. — Nelson S, Oct 18 '13 at 17:15

jQuery id selectors stuck while fading between

1 Answers1