In this article I’m going
to explain how to show/hide multiple DIV specific time interval by using
JQuery.
It’s
quite easy to how/hide multiple DIV specific time interval by using JQuery.
JQuery Show() and hide() function enables you to do this task with custom Fade
In and Fade Out effect. Please follow the steps given below
First we have to add JQuery library,
Add
JQuery library:
Please add this JQuery library on <head> section:
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.7.1.js"></script>
Add
Script:
<script type="text/javascript">
$(document).ready(function () {
var
$divs = $("div").hide(),
current = 0;
$divs.eq(0).show();
function
showNext() {
if
(current < $divs.length - 1) {
$divs.eq(current).delay(2000).fadeOut('fast',
function () {
current++;
$divs.eq(current).fadeIn('fast');
showNext();
});
}
}
showNext();
});
</script>
Add
style:
<style type="text/css">
.divstyle {
background:#4D4D4D; width:500px;
height:150px; color:White;
font-family:Calibri; font-size:30px;
text-align:center; padding-top:100px; }
.divstyle1 {
background:#338585; width:500px;
height:150px; color:White;
font-family:Calibri; font-size:30px;
text-align:center; padding-top:100px; }
</style>
Add
HTML Markup:
<div id="div1" class="divstyle1">
Welcome to dotnetfox</div>
<div id="div2" class="divstyle">
ASP.NET</div>
<div id="div3" class="divstyle1">
WCF</div>
<div id="div4" class="divstyle">
JQyery</div>
<div id="div5" class="divstyle1">
AJAX</div>