این افکت باعث مخفی شدن عنصر مورد نظر می شود . عمکلرد این افکت بسیار شبیه به افکت fadeOut می باشد . بوسیله این افکت برای مثال می توانید این اختیار را به کاربر بدهید تا عناصری را که در صفحه لازم ندارد ، مخفی کند .
شکل کلی استفاده از این متد به شرح زیر است :
| Syntax | $ ( " selector " ).hide ( speed , callback ) |
توضیح هر یک از موارد syntax :
| syntax توضیح | |
| توضیح | Parameter |
| selector عنصری است که این افکت باعث مخفی شدن آن می شود . | selector |
|
این پارامتر در این افکت اختیاری بوده و مقدار پیش فرض آن صفر است . این پارامتر سرعت مخفی شدن عنصر توسط افکت را تعین می کند . این پارامتر به دو صورت قابل مقداردهی می باشد .
|
speed |
|
توسط این پارامتر می توان نام یک تابع را تعیین کنید تا پس از پایان پافتن اجرای افکت و مخفی شدن عنصر مورد نظر ، آن تابع اجرا شود . به کار بردن این پارامتر اختیاری است . |
callback |
در چند مثال سعی می کنیم تا استفاده از افکت ( ) hide را در عمل به شما نمایش دهیم .
مثال 1 : در مثال اول یک تگ < div > د اریم که در ابتدا نمایش داده می شود . یک دکمه فرمان طراحی کرده ایم که کاربر برای مخفی کردن تگ < div > باید بر روی آن کلیک نماید . با کلیک بر روی دکمه فرمان مثال ، تگ < div > مخفی می شود :
| Example | |
|
< html > < head > < script type="text/javascript" src="jquery.js" > < /script > < script type="text/javascript" > $ (document). ready ( function( ) { $ (" # Btn_1 ") . click ( function( ){ $ ( " # div_1 " ) . hide( ) }); }); </script> </head> <body> < input type="button" id="Btn_1" value="click me for hide!" /> <div id= "div_1" style = "font-size: medium ; border: solid 1px black " > در این سایت آموزش زبان های زیر را داریم <ul> <li>HTML </li> <li>CSS </li> <li>Java Script </li> <li>jQuery </li> </ul> < /div > </body> </html> |
کد |
مثال 2 : در مثال دوم دو لیست از اسامی زبان های برنامه نویسی را با آیتم های مختلف به کاربر نمایش داده ایم . در ابتدا آیتم های لیست ها به کاربر نمایش داده می شود . اما کاربر می تواند با برداشتن تیک کنترل انتخابی checkbox در مثال ، آیتم های لیست را مخفی کند . برای مخفی کردن آیتم های لیست ها تیک کادر انتخاب را در خروجی مثال بردارید :
راهنمایی مثال : در این مثال افکت hide اعضای کلاس Items را که همان آیتم های لیست ها هستند ، را مخفی می کند .
| Example | |
|
< html > < head > < script type="text/javascript" src="jquery.js" > < /script > < script type="text/javascript" > $ (document). ready ( function( ) { $ (" # Check_1 ") . change ( function( ){ $ ( " .Items " ) . hide( ) }); }); </script> </head> <body> <input type="checkbox" id="Check_1" checked="checked" /> نمایش زیر مجموعه ها طراحی وب <ul> <li class="Items">HTML </li> <li class="Items">CSS </li> <li class="Items">Flash </li> </ul> برنامه نویسی وب <ul> <li class="Items">ASP.Net </li> <li class="Items">PHP </li> <li class="Items">Java Script </li> <li class="Items">jQuery </li> </ul> </body> </html> |
کد |
