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

افکت ها در 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 را که همان آیتم های لیست ها هستند ، را مخفی می کند .

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> 		کد
نمایش زیر مجموعه ها
طراحی وب
  • HTML
  • CSS
  • Flash
برنامه نویسی وب
  • ASP.Net
  • PHP
  • Java Script
  • jQuery
خروجی

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

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

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

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