افکت Hide و Show و Toggle در جی کوئری

افکت Hide و Show و Toggle در جی کوئری :

امروز به شما استفاده از افکت Hide و Show و Toggle در جی کوئری (jQuery) را آموزش می دهیم.

یکی از قابلیت های مهم جی کوئری مخفی سازی یا به نمایش در اوردن عناصر در صفحه HTML است. حتما شما در صفحات وب با منوهای اکاردئونی یا پنل های باز و بسته شونده کار کرده اید. بد نیست بدانید بیس طراحی این گونه عناصر با همین متدهای ساده جی کوئری است که در ادامه به توضیح آن خواهیم پرداخت.

افکت hide در جی کوئری

این متد جهت مخفی کردن عناصر صفحه توسط جی کوئری استفاده می‌شود. نگارش یا سینتکس متد hide به شکل زیر می‌باشد:

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

افکت show در جی کوئری

متد show جهت نمایش عناصر مخفی صفحه توسط جی کوئری استفاده می‌شود. نگارش یا سینتکس مند show به شکل زیر می باشد:

$(selector).show(speed,callback);

افکت toggle در جی کوئری

توسط افکت toggle امکان تغییر وضعیت بین دو متد hide و show را خواهید داشت. به این معنی که توسط افکت toggle می توانید عناصر مخفی در صفحه را نمایش دهید و یا عناصر نمایش داده شده در صفحه را مخفی کنید. بستگی به وضعیت hide یا show بودن عنصر دارد. سینتکس یا نگارش این متد به شرح زیر است:

$(selector).toggle(speed,callback);

پارامتر speed : این پارامتر در هر دو متد hide و show اختیاری می باشد. توسط این پارامتر می توانید سرعت مخفی شدن یا نمایش دادن عنصر مربوطه  را تعیین کنی. مقدار این پارامتر می تواند کلمات کلیدی “slow” , “fast” یا عددی بر حسب میلی ثانیه باشد.

پارامتر callback : این پارامتر در هر دو متد hide و show اختیاری می باشد. توسط این پارامتر می توانید یک تابع را پس از اجرا شدن کامل متدهای hide و show اجرا کنید.

حال به مثالهای زیر توجه کنید:

$("#showbtn").click(function(){       
       $("#show").show();                         
});

با کلیک بر روی دکمه پاراگراف به حالت مخفی در می‌آید.

$("#hidebtn").click(function(){       
       $("#hide").hide();                         
});

با کلیک بر روی دکمه پاراگراف به حالت نمایش در می‌آید.

$("#togglebtn").click(function(){        
      $("#toggle").toggle(1000);                         
});

با تکرار کلیک بر روی این دکمه مشاهده می‌کنید با تاخیر یک ثانیه ای این اتفاق تکرار می شود.

در پایان میتوانید نتایج مثال های بالا را ارزیابی کنید:

See the Pen
agYogr by Farazgar (@tahatabibzadeh)
on CodePen.

از اینکه فرازگر را در این مقاله همرایی کردید از شما سپاسگذاریم.

سایت کتابخانه جی کوئری : www.jquery.com