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

1393/1/16       00000             JQuery show hide multiple DIV specific time interval :: نمایش چندین موضوع با جی کوئری       مطالب آموزشی , ASP.NET , jQuery



گروه پرهاست , پایگاه اطلاع رسانی با فرهنگ , پایگاه اطلاع رسانی پدیده شیراز , پایگاه اطلاع رسانی بررسی رتبه و رنک سایت , پایگاه اطلاع رسانی 42152.ir , پایگاه اطلاع رسانی مدیریت و دسترسی به آدرسها و لینکهای اینترنتی , پایگاه اطلاع رسانی اولین همراه , پایگاه اطلاع رسانی دی جی 115 , پایگاه اطلاع رسانی روندها Trand.ir , پایگاه اطلاع رسانی نرم افزارهای جغرافیایی , پایگاه اطلاع رسانی کلیل ، کلیل فارس ، شهر اقلید , پایگاه اطلاع رسانی فروش محصولات فرهنگی , پایگاه اطلاع رسانی حیدرنیا , پایگاه اطلاع رسانی پشتیبانی از خدمات و سرویسهای ارائه شده به شما , پایگاه اطلاع رسانی دی جی 2000 , پایگاه اطلاع رسانی انجمن فناوری اطلاعات , پایگاه اطلاع رسانی دانشجویان دانشگاه مجازی فاران , پایگاه اطلاع رسانی همیار اس ام اس و پیامک های انبوه , پایگاه اطلاع رسانی ابزارهای مدیریت و ویرایش تصویر و عکس آنلاین بصورت رایگان , پایگاه اطلاع رسانی نجوم و اختر شناسی , پایگاه اطلاع رسانی بهترین هاست , پایگاه اطلاع رسانی آقای محمودپور , پایگاه اطلاع رسانی تولید کننده نقشه سایت , پایگاه اطلاع رسانی نیستی؟ , پایگاه اطلاع رسانی آقای کندی , پایگاه اطلاع رسانی دانشجویان رشته روانشناسی تربیتی دانشگاه آزاد واحد علوم تحقیقات تهران , پایگاه اطلاع رسانی آرک مپ ArcMap.ir , پایگاه اطلاع رسانی آقای حاج سلمانی , پایگاه اطلاع رسانی بهترین گروه و انجمن , پایگاه اطلاع رسانی شهید شیرودی , پایگاه اطلاع رسانی ArcObject.ir , پایگاه اطلاع رسانی اخترشناسان ایران , پایگاه اطلاع رسانی ابزارهای مدیریت محتوای وردپرس , پایگاه اطلاع رسانی FreeP30.ir , پایگاه اطلاع رسانی پرهام حیدرنیا , پایگاه اطلاع رسانی مدیریت ارسال و دریافت پیامک انبوه , سامانه مدیریت محتوای parcms.ir , پایگاه اطلاع رسانی آقای گودرزی , پایگاه اطلاع رسانی درخشان , پایگاه اطلاع رسانی اطلس ها , پایگاه اطلاع رسانی همراه اولی ، مدیریت پیامک و SMS , پایگاه اطلاع رسانی مدیریت پیامکهای انبوه , پایگاه اطلاع رسانی ابزارهای فناوری اطلاعات , پایگاه اطلاع رسانی FreePC.ir , پایگاه اطلاع رسانی خوابگاه های دانشجویی و کارمندی , پایگاه اطلاع رسانی 88080.ir , پایگاه اطلاع رسانی تب فا TabFa.ir
تبلیغ گروه فنی مهندسی پرهاست , , تبلیغ گروه فنی مهندسی پرهاست
Copyright © 2002-2017, hajsalmani.ir. Design and Hosting by ParHost All Rights Reserved.
3526