jQuery id selectors stuck while fading between <div>

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

Answer 1

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