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



 7Agahi.ir سامانه تبلیغاتی 7 آگهی
7Agahi.ir سامانه آگهی رایگان هفت آگهی


یادداشتها و چرکنویس های من parhost.net گروه فنی مهندسی پرهاست
یادداشتها و چرکنویس های من… یادداشتها ، مطالب ، نکات مهم و کاربردی … :: parhost.net گروه فنی مهندسی پرهاست


پایگاه اطلاع رسانی آرک مپ ArcMap.ir , پایگاه اطلاع رسانی اخترشناسان ایران , پایگاه اطلاع رسانی روندها Trand.ir , پایگاه اطلاع رسانی ابزارهای فناوری اطلاعات , پایگاه اطلاع رسانی با فرهنگ , پایگاه اطلاع رسانی مدیریت و دسترسی به آدرسها و لینکهای اینترنتی , پایگاه اطلاع رسانی اطلس ها , پایگاه اطلاع رسانی نرم افزارهای جغرافیایی , پایگاه اطلاع رسانی پرهام حیدرنیا , پایگاه اطلاع رسانی بهترین گروه و انجمن , پایگاه اطلاع رسانی 88080.ir , پایگاه اطلاع رسانی فروش محصولات فرهنگی , پایگاه اطلاع رسانی انجمن فناوری اطلاعات , پایگاه اطلاع رسانی ArcObject.ir , مهد کودک نهال زندگی دو زبانه و دارای امکانات کامل و متنوع آرامش و آسودگی خیال برای والدین اولین هدیه نهال زندگی است سعادت آباد، خیابان یکم(جمشیدی)، خیابان شبنم، کوچه لاله پلاک 6 22094686 - 22382103 www.MahdeNahaleZendegi.com , مهد کودک نهال زندگی دو زبانه و دارای امکانات کامل و متنوع آرامش و آسودگی خیال برای والدین اولین هدیه نهال زندگی است سعادت آباد، خیابان یکم(جمشیدی)، خیابان شبنم، کوچه لاله پلاک 6 22094686 - 22382103 www.MahdeNahaleZendegi.com
آموزش هنرهای دوزندگی و چهل تکه دوزی با شادی در شادی دوز با مدیریت مهین حیدرنیا ShadiDooz.ir , , 7Agahi.ir سامانه آگهی رایگان هفت آگهی , , گروه فنی مهندسی پرهاست , , وبلاگ پرهاست , , وبلاگ گروه فنی مهندسی پرهاست
Copyright © 2002-2019, uptrend.ir. Design and Hosting by ParHost All Rights Reserved.
10202