افکت ها در jQuery - افکت delay
افکت ( ) delay در jQuery :
این افکت باعث ایجاد یک تاخیر در اجرای افکت دیگری می شود .
برای مثال فرض کنید که یک افکت ( ) fadeIn را برای یک عنصر تعیین کرده اید .
این افکت در هنگام کلیک کاربر بر روی دکمه فرمان اجرا می شود . اما می خواهید کاری
کنید تا مثلا 3 ثانیه بعد از کلیک کاربر بر روی دکمه فرمان ، افکت ( ) fadeIn اجرا
شود . برای این منظور بایستی از افکت ( ) delay به همراه آن استفاده کنید .
شکل کلی استفاده ازاین افکت بصورت زیر است :
|
Syntax
|
$( selector ).delay( speed ) ;
|
توضیح هر یک از موارد syntax :
|
توضیح
|
|
این پارامتر تعیین کننده id عنصری است که می خواهیم در اجرای یک افکت بر روی آن ، تاخیر
ایجاد نماییم .
|
این پاراتر تعیین کننده مدت زمان تاخیر در اجرای افکت است .
انواع مقادیر ممکن عبارتند از :
- MiliSecond : مدت زمان تاخیر در اجرای افکت بر حسب میلی ثانیه .
- Slow : سرعت آهسته .
- Fast : سرعت زیاد .
|
مثال : در مثال زیر چندین تگ div داریم ، که در هنگام کلیک بر روی
دکمه فرمان مثال ، بر روی صفحه ظاهر می شوند . اما برای اجرای هر کدام یک تاخیر با
استفاده از متد ( ) delay ایجاد کرده ایم :
< 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>
|
|
راجع این مطلب
سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...
>>>>> ورود به انجمن تخصصی
نظر خودتان درباره این صفحه را با ما در میان بگذارید :