jQuery id 选择器在 <div> 之间淡入时卡住

Question

我是 jQuery/javascript 新手，我在 jQuery 上遇到了问题，这让我在过去几天都陷入了困境。 这是一个从 3 个不同的 div 切换的脚本。它确实从第一个切换到第二个，但如果随机选择试图从第二个切换到第三个，它会冻结脚本。

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

})();

这似乎是我的 jQuery 行无法继续并卡住了整个事情

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

非常感谢您提供的任何帮助。

编辑：更新了更清晰的代码

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

编辑

修改代码以适合您在此答案的 cmets 中的解释；应该是你需要的一切。

JSFIDDLE