Title: Multiple slideshow divs at a time
Tags: javascript;jquery;html;carousel
Question: I have created a simple fade in effect for content which is working fine. But when I try to display multiple divs which has the same fade effect, it is not displaying all divs at the same time.
Second div starts animation when the first one is done. But I need to display all at the same time.
Here is my code and demo below
var quotes = $(".inner_detail div");
var quoteIndex = -1;
function showNextQuote() {
++quoteIndex;
quotes.eq(quoteIndex % quotes.length)
.fadeIn(2000)
.delay(2000)
.fadeOut(2000, showNextQuote);
showNextQuote();
Comment: You need to loop through each `inner_div` container to reach the multiple slideshow hbryan@example.com. Check the answer below.


Here is another answer: From your demo fiddle, it is clear that there are multiple inner_div containers and your function access them one at time so the multiple slide is not being achieved. So you have to loop through each inner_div container to reach the multiple slideshow hbryan@example.com.
There are many possibilities, among the below is one example:
$(document).ready(function() {
$(".inner_detail").each(function(){
slideQuote(this,0);
});
function slideQuote(inner_div,eq) {
if($(inner_div).find("div").size() == eq) {
eq = 0;
}
$(inner_div).find("div").eq(eq)
.fadeIn(2000)
.delay(2000)
.fadeOut(2000,
function(){
slideQuote(inner_div,eq+1);
}
);
}
Check the working Demo Fiddle.

Here is another answer: $(function(){
var quotes = $(".inner_detail").get();
$.each(quotes,function(index,value){
var quoteIndex = -1;
function showNextQuote() {
++quoteIndex;
$(quotes[index]).find("div").eq(quoteIndex % quotes.length)
.fadeIn(2000)
.delay(2000)
.fadeOut(2000, showNextQuote);
showNextQuote();
});});

Here is another answer: Good day.
This code makes each inner_detail block show (with your effect) divs one by one. All inner_detail elements do it at the same time.
function go()
$(".inner_detail").each(function(){
showNextQuote(this,0);
});
function showNextQuote(inner_div,eq) {
$(inner_div).find("div").eq(eq).fadeIn(2000)
.delay(2000)
.fadeOut(2000,function(){showNextQuote(inner_div,eq*1+1);});
If you want to loop it forever, just chek eq parameter to be more then div count in inner_detail element. And set it back to zero if neede.
Hope it helped.

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 3, 'CommentCount': 1, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2013:00:05/31/13', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<javascript><jquery><html><carousel>', 'Title': 'Multiple slideshow divs at a time', 'ViewCount': 597, 'id': 16851198, 'user_AboutMe': '<p>UI Developer with 6 years of experience.</p>\n', 'user_AccountId': 1023392.0, 'user_DisplayName': 'Sowmya', 'user_Reputation': 26256.0, 'user_Views': 3216.0, 'user_id': 1033200.0}}