تبلیغات متنی و بنر

افکت ها در jQuery - افکت delay

افکت ( ) delay در jQuery :

این افکت باعث ایجاد یک تاخیر در اجرای افکت دیگری می شود .

برای مثال فرض کنید که یک افکت ( ) fadeIn  را برای یک عنصر تعیین کرده اید . این افکت در هنگام کلیک کاربر بر روی دکمه فرمان اجرا می شود . اما می خواهید کاری کنید تا مثلا 3 ثانیه بعد از کلیک کاربر بر روی دکمه فرمان ، افکت ( ) fadeIn اجرا شود . برای این منظور بایستی از افکت ( ) delay به همراه آن استفاده کنید .
شکل کلی استفاده ازاین افکت بصورت زیر است :

Syntax $( selector ).delay( speed ) ;

توضیح هر یک از موارد syntax :

syntax توضیح
توضیح Parameter
این پارامتر تعیین کننده id عنصری است که می خواهیم در اجرای یک افکت بر روی آن ، تاخیر ایجاد نماییم . selector
این پاراتر تعیین کننده مدت زمان تاخیر در اجرای افکت است .
انواع مقادیر ممکن عبارتند از :
  1. MiliSecond : مدت زمان تاخیر در اجرای افکت بر حسب میلی ثانیه .
  2. Slow : سرعت آهسته .
  3.  Fast : سرعت زیاد .
 speed

مثال : در مثال زیر چندین تگ div داریم ، که در هنگام کلیک بر روی دکمه فرمان مثال ، بر روی صفحه ظاهر می شوند . اما برای اجرای هر کدام یک تاخیر با استفاده از متد ( ) delay ایجاد کرده ایم :

Example
< html >
  < head >
    < script type="text/javascript" src="jquery.js" > < /script >
    < script type="text/javascript" >
      $ (document). ready ( function( ) {
          $("button").click(function () {
         $("#div1").delay("slow").fadeIn();
         $("#div2").delay("fast").fadeIn();
         $("#div3").delay( ( ) delay 00).fadeIn();
         $("#div4").delay(2000).fadeIn();
         $("#div5").delay(4000).fadeIn();
          });
        });
    </script>
  </head>
<body>
       <button type="button"> برای مشاهده باکس ها با تاخیر کلیک نمایید</button>
       <br>
       <div id="div1" style="width: 90px; height: 90px; display: none; background-color: black;"> </div>
       <br>
       <div id="div2" style="width: 90px; height: 90px; display: none; background-color: green;"> </div>
       <br>
       <div id="div3" style="width: 90px; height: 90px; display: none; background-color: blue;"> </div>
       <br>
       <div id="div4" style="width: 90px; height: 90px; display: none; background-color: red;"> </div>
       <br>
       <div id="div5" style="width: 90px; height: 90px; display: none; background-color: purple;"> </div>
</body>
</html> 		کد







خروجی

راجع این مطلب سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...         >>>>>  ورود به انجمن تخصصی

نظر خودتان درباره این صفحه را با ما در میان بگذارید :

آیا مطالب این صفحه برای شما مناسب و مفید بوده است :

نام :                 
آدرس Email :    
 
نظر شما :  
 
سوال امنیتی : جمع سه + پنج چنده ؟