افکت ( ) toggle در jQuery
در این بخش از آموزش jquery ، افکت toggle را در طراحی سایت آموزش می دهیم.
افکت ( ) toggle بین دو افکت ( ) show و افکت ( ) hide تغییر وضعیت می دهد .
افکت ( ) toggle وضعیت نمایش و یا عدم نمایش عنصر مورد نظر رابر روی صفحه می سنجد . اگر عنصر در حال نمایش باشد آن را با استفاده از متد Hide مخفی کرده و اگر عنصر مخفی باشد آن را با استفاده از متد Show نمایش می دهد .
افکت ( ) toggle برای عناصری که از ابتدای اجرای صفحه مخفی تعیین شده اند ، کار نمی کند .
شکل کلی استفاده از این متد به شرح زیر است :
$( selector ).toggle( speed , easing , callback ) ;
selector : تعیین کننده id عنصری است که می خواهیم افکت ( ) toggle ، بر روی آن اجرا شود .
speed : این پارامتر تعیین کننده سرعت انجام افکت و تغییر حالت عنصر از حالت اول به دوم است . استفاده از این پارامتر اختیاری است .
انواع مقادیر ممکن عبارتند از :
1) MiliSecond : مدت زمان اجرای افکت بر حسب میلی ثانیه .
2) Slow : سرعت آهسته
3) Fast : سرعت زیاد
easing :این پارامتر تعیین کننده سرعت انجام افکت در ابتدا و انتهای آن است . استفاده از این پارامتر اختیاری است .
انواع مقادیر ممکن عبارتند از :
1) Swing :سرعت انجام افکت در ابتدا و انتهای فرایند آهسته ولی در وسط آن زیاد است .
2) Liner : سرعت در کل طول فرایند یکسان است .
به وسیله این پارامتر می توانیم یک تابع را تعیین کنیم ، تا در پایان انجام افکت ( ) toggle ، اجرا شود .
function :استفاده از این پارامتر اختیاری است .
مثال زیر کاربرد افکت ( ) toggle را نشان میدهد :
$("button").click(function(){
$("p").toggle();
});