خانه » ASP.NET » JQuery show hide multiple DIV specific time interval :: نمایش چندین موضوع با جی کوئری

JQuery show hide multiple DIV specific time interval :: نمایش چندین موضوع با جی کوئری

امتیاز دهی به این نوشته

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>

Ref: http://www.dotnetfox.com/articles/jquery-show-hide-multiple-div-specific-time-interval-1104.aspx

همچنین ببینید

مقاله Article Publication جاپ ۶ گام انتخاب مجله مناسب برای چاپ مقاله چیست؟

۶ گام انتخاب مجله مناسب برای چاپ مقاله چیست؟

امتیاز دهی به این نوشته باوجود تعداد زیاد مجلات علمی، تصمیم‌گیری در مورد اینکه مقاله‌تان …

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *