Response title
This is preview!
Fading in and out of multiple divs
in Using jQuery
•
10 years ago
I am building a page which displays on a TV in a health care facility, one div shows the dining room menu for the day and another div shows the upcoming activities. I can rotate through the two divs without a problem. However, I created the ability for the user to add an additional div with customized content and I need to now create the ability to rotate through three divs, if the third div is present. I would like to be able to set different times for each div to stay visible before fading out to the next div, and I would also like to be able to rotate from the menu div, to the activities div, back to the menu div, and then to the additional div. Any help would be greatly appreciated, I have spent a long time trying to get this to work. Here is the code I have so far:
$('#transitionDiv').ready(function() {
setInterval(function()
{
var mainPage = $('#menu');
var activitiesPage = $('#activities');
var mainPageDelay = 3000; // set default delays for pages
var otherPageDelay = 3000;
var fadeDelay = 2000;
if ($('#addPage').length > 0) {
var addPage = 1;
} else {
var addPage = 0;
}
if (addPage == 0) {
$('#transitionDiv').each(function() {
mainPage.delay(mainPageDelay);
mainPage.fadeOut(fadeDelay);
activitiesPage.delay(mainPageDelay);
activitiesPage.fadeIn(fadeDelay);
activitiesPage.delay(otherPageDelay);
activitiesPage.fadeOut(fadeDelay);
mainPage.delay(otherPageDelay);
mainPage.fadeIn(fadeDelay);
});
}
if (addPage == 1) {
var additionalPage = $('#addPage');
$('#transitionDiv').each(function() {
mainPage.delay(mainPageDelay);
activitiesPage.delay(mainPageDelay);
mainPage.fadeOut(fadeDelay);
activitiesPage.fadeIn(fadeDelay);
activitiesPage.delay(otherPageDelay);
activitiesPage.fadeOut(fadeDelay, function() {
additionalPage.fadeIn(fadeDelay);
additionalPage.delay(otherPageDelay);
additionalPage.fadeOut(fadeDelay);
mainPage.delay(otherPageDelay);
mainPage.fadeIn(fadeDelay);
});
});
}
});
});
1