آموزش jQuery - افکت hide

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

افکت ( ) hide در jQuery :

این افکت باعث مخفی شدن عنصر مورد نظر می شود . عمکلرد این افکت بسیار شبیه به افکت fadeOut می باشد . بوسیله این افکت برای مثال می توانید این اختیار را به کاربر بدهید تا عناصری را که در صفحه لازم ندارد ، مخفی کند .
شکل کلی استفاده از این متد به شرح زیر است :

Syntax

$ ( " selector " ).hide ( speed , callback )

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

syntax توضیح
توضیح	Parameter
selector عنصری است که این افکت باعث مخفی شدن آن می شود .	selector
این پارامتر در این افکت اختیاری بوده و مقدار پیش فرض آن صفر است . این پارامتر سرعت مخفی شدن عنصر توسط افکت را تعین می کند . این پارامتر به دو صورت قابل مقداردهی می باشد . تعیین به وسیله زمان بر حسب میلی ثانیه : در این حالت مدت زمانی که می خواهید در آن عنصر مخفی شود را نعیین می کنید . مثلا 100 ms . تعیین بر اساس 3 حالت کلی زیر : در این حالت با انتخاب یکی از 3 مقدار زیر سرعت مخفی شدن را آرام ، معمولی و یا سریع انتخاب می نمایید . "slow" "normal" "fast"	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>	کد
در این سایت آموزش زبان های زیر را داریم HTML CSS Java Script jQuery	خروجی

مثال 2 : در مثال دوم دو لیست از اسامی زبان های برنامه نویسی را با آیتم های مختلف به کاربر نمایش داده ایم . در ابتدا آیتم های لیست ها به کاربر نمایش داده می شود . اما کاربر می تواند با برداشتن تیک کنترل انتخابی checkbox در مثال ، آیتم های لیست را مخفی کند . برای مخفی کردن آیتم های لیست ها تیک کادر انتخاب را در خروجی مثال بردارید :
راهنمایی مثال : در این مثال افکت hide اعضای کلاس Items را که همان آیتم های لیست ها هستند ، را مخفی می کند .

< 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>

نمایش زیر مجموعه ها
طراحی وب

HTML
CSS
Flash

برنامه نویسی وب

ASP.Net
PHP
Java Script
jQuery

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

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

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

نام :
آدرس Email :

نظر شما :

سوال امنیتی : جمع سه + پنج چنده ؟