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

Rate this post

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

بیشتر بخوانید:   ایجاد یک اسلایدر ساده عکس در jquery

Check Also

سومین جلسه کارگاه آموزشی رایگان آشنایی با اختلال طیف اتیسم پنجشنبه 03/08/1397 ساعت 10 الی 11 What is Autism? مدرس : دکتر فاطمه خاندانی، دکترای تخصصی روانشناسی، موسس و مدیرعامل موسسه خیریه مهرگسترپرهام تهران شماره ثبت 44662 با مجوز و تحت نظارت سازمان بهزیستی استان تهران – آشنایی با اختلال طیف اُتیسم – علت اختلال طیف اُتیسم – علائم و نشانگان اختلال طیف اُتیسم – بهترین زمان تشخیص اختلال طیف اُتیسم – مداخلات تاثیرگذار ، مدیریت و درمان برای شرکت در دوره های رایگان آشنایی با اُتیسم با شماره 86026252 تماس بگیرید محل برگزاری : تهران ، یافت آباد، بلوار معلم، میدان معلم، خیابان تختی، مجتمع خدمات بهزیستی شهید ذوالفقاری ، ساختمان موسسه خیریه مهرگستر پرهام تهران، فعال حوزه اُتیسم http://MGPTC.com

سومین جلسه کارگاه آشنایی با اختلال طیف اتیسم

سومین جلسه کارگاه آموزشی رایگان آشنایی با اختلال طیف اتیسم پنجشنبه ۰۳/۰۸/۱۳۹۷ ساعت ۱۰ الی …

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

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