jQueryのキュー機能

Question

私は、スライドショーを書いています。私は最終的に1つのスライドだけを表示するための良い機能を持っています。それは、私がshoSlideをしばらく待ってからスライドを隠すのとまったく同じように表示されます。いいえ、私は1つのスライドにこの良いが、私の問題は多くのためにそれをやっている。

function slideShow() { 
    console.log("countdown Slide Count: " + numberOfSlides); 

    console.log("Current slide number: " + jslideNumber); 

    $('#slide' + jslideNumber).fadeIn(1000).delay(5000).queue(function (next) { 
     console.log("Hiding Slide Number: " + jslideNumber); 
     $('#slide' + jslideNumber).fadeOut(1000); 
     next(); 
    }); 
} 

slideShow(); 

私はWHILEループに入れようとしましたが、WHILEまたはFORループのいずれかを使用して無限カウンタを生成しました。以前はjslideNumber ++をインクリメントしていましたが、問題は、ループがキューを起動するよりも速くインクリメントすることです。だからSlide1が表示されているときは、通常はSlide1が隠れているはずですが、Slide1が表示されてから、遅延がカウンタに追いつくまでにSlide6を隠そうとします。

Answer 1

あなたは何あなたがコードを書き直すされていない"[id^=slide]"セレクタ、$.map()、.dequeue()

var n = 150; 
 

 
$.map(Array(n), function(val, index) { 
 
    $("body").append("<div id=slide"+index+">"+index+"</div>") 
 
}) 
 

 
$({}).queue("_fx", $.map($("[id^=slide]"), function(el) { 
 
    return function(next) { 
 
    $(el).fadeIn(1000, function() { 
 
     $(this).delay(5000).fadeOut(1000, next) 
 
    }) 
 
    } 
 
})).dequeue("_fx")

[id^="slide"] { 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script>