افکت ها در jQuery - افکت fadeOut
افکت ( ) fadeOut در jQuery :
این افکت باعث می شود تا عنصر مورد اثر آن به تدریج از حالت نمایان به حالت مخفی در
بیاید .این افکت در یک افکت تصویری با کم کردن نور عنصر به تدریج باعث مخفی شدن آن
از دید کاربر می شود .
شکل کلی استفاده از این متد به شرح زیر است :
|
Syntax
|
$ ( " selector " ).fadeOut ( speed , callback )
|
توضیح هر یک از موارد syntax :
|
توضیح
|
|
selector عنصری است که این افکت باعث مخفی شدن آن می شود .
|
این پارامتر اختیاری بوده و مقدار پیش فرض آن صفر است .
این پارامتر سرعت مخفی شدن عنصر توسط افکت را تعین می کند .
این پارامتر به دو صورت قابل مقداردهی می باشد .
- تعیین به وسیله زمان بر حسب میلی ثانیه : در این حالت مدت زمانی که می خواهید در آن
عنصر به تدریج مخفی شود را نعیین می کنید . مثلا 100 ms .
- تعیین بر اساس 3 حالت کلی زیر : در این حالت با انتخاب یکی از 3 مقدار زیر سرعت مخفی
شدن را آرام ، معمولی و یا سریع انتخاب می نمایید .
|
توسط این پارامتر می توان نام یک تابع را تعیین کنید تا پس از پایان پافتن اجرای افکت
و مخفی شدن عنصر مورد نظر ، آن تابع اجرا شود .
به کار بردن این پارامتر اختیاری است .
|
در چند مثال سعی می کنیم تا استفاده از افکت ( ) fadeOut را در عمل به شما نمایش دهیم
.
مثال 1 : در مثال اول یک تگ < div > داریم که با کلیک
کاربر بر روی آن افکت fadeOut اجرا شده و باعث مخفی شدن آن می شود . برای اجرای افکت
بر روی متن تگ < div > کلیک نمایید .
< html >
< head >
< script type="text/javascript" src="jquery.js"
> < /script >
< script type="text/javascript" >
$ (document). ready ( function(
) {
$ (" # div_1 ") . click ( function(
){
$ ( " # div_1 " ) .
fadeOut( )
});
});
</script>
</head>
<body>
<div id= "div_1" style = "font-size: medium
; border: solid 1px black " >
jQuery is a very inteligent way for programming
. many wonderful things you can do with it !
< /div >
</body>
</html>
|
|
jQuery is a very inteligent way for programming . many wonderful things you can
do with it !
|
مثال 2 : نحوه استفاده از پارامتر speed در افکت fadeOut در
مثال دوم ، مثال قبل را بازنویسی کرده ایم با این تفاوت که در 2 حالت به پارامتر speed
افکت fadeOut مقدار داده ایم . برای مشاهده تاثیر مقدار پارامتر بر روی افکت بر روی
خروجی های مثال کلیک نمایید :
< html >
< head >
< script type="text/javascript" src="jquery.js"
> < /script >
< script type="text/javascript" >
$ (document). ready ( function(
) {
$ (" # div_2 ") . click ( function(
){
$ ( " # div_2 " ) .
fadeOut( 2000 )
});
});
</script>
</head>
<body>
<div id= "div_2" style = "font-size: medium
; border: solid 1px black " >
jQuery is a very inteligent way for programming
. many wonderful things you can do with it !
< /div >
</body>
</html>
|
|
jQuery is a very inteligent way for programming . many wonderful things you can
do with it !
|
|
< html >
< head >
< script type="text/javascript" src="jquery.js"
> < /script >
< script type="text/javascript" >
$ (document). ready ( function(
) {
$ (" # div_3 ") . click ( function(
){
$ ( " # div_3 " ) .
fadeOut( "slow" )
});
});
</script>
</head>
<body>
<div id= "div_3" style = "font-size: medium
; border: solid 1px black " >
jQuery is a very inteligent way for programming
. many wonderful things you can do with it !
< /div >
</body>
</html>
|
|
jQuery is a very inteligent way for programming . many wonderful things you can
do with it !
|
|
راجع این مطلب
سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...
>>>>> ورود به انجمن تخصصی
نظر خودتان درباره این صفحه را با ما در میان بگذارید :