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

8 / 10 از 2 کاربر

رویداد ( ) toggle در jQuery

در این بخش از آموزش JQuery ، رویداد toggle را در طراحی سایت  شرح میدهیم. 

رویداد toggle بین دو افکت ( ) show و افکت ( ) hide تغییر وضعیت می دهد .

رویداد toggle وضعیت نمایش و یا عدم نمایش عنصر مورد نظر رابر روی صفحه می سنجد . اگر عنصر در حال نمایش باشد آن را با استفاده از متد Hide مخفی کرده و اگر عنصر مخفی باشد آن را با استفاده از متد Show نمایش می دهد . این متد برای عناصری که از ابتدای اجرای صفحه مخفی تعیین شده اند ، کار نمی کند .

شکل کلی استفاده از این متد به شرح زیر است :

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

selectorتعیین کننده id عنصری است که می خواهیم افکت ( ) toggle ، بر روی آن اجرا شود . 
speed : این پارامتر تعیین کننده سرعت انجام افکت و تغییر حالت عنصر از حالت اول به دوم است . استفاده از این پارامتر اختیاری است .
انواع مقادیر ممکن عبارتند از :
1) MiliSecond : مدت زمان اجرای افکت بر حسب میلی ثانیه .
2) Slow : سرعت آهسته
3) Fast : سرعت زیاد 
easing : این پارامتر تعیین کننده سرعت انجام افکت در ابتدا و انتهای آن است . استفاده از این پارامتر اختیاری است .
انواع مقادیر ممکن عبارتند از :
1) Swing :سرعت انجام افکت در ابتدا و انتهای فرایند آهسته ولی در وسط آن زیاد است .
2) Liner : سرعت در کل طول فرایند یکسان است . 
function : به وسیله این پارامتر می توانیم یک تابع را تعیین کنیم ، تا در پایان انجام افکت ( ) toggle ، اجرا شود .
استفاده از این پارامتر اختیاری است . 

مثال زیر کاربرد رویداد toggle را نشان میدهد :

$("p").toggle(
function(){$("p").css({"color":"red"});},
function(){$("p").css({"color":"blue"});},
function(){$("p").css({"color":"green"});
});

مازیار راسخ : راهنمایی بیشتر
4 3
سلام...ممنون از آموزشای خوبتون ..می خواستم سوال کنم که الان تو این کد ما به جای function()اول باید slow یاfast ویا milisecond رو بزنیم دیگه درسته؟
مدیریت : پاسخ
4 2
بله. در توضیحات به طور ریز مقادیری که باید قرار داده شود نوشته شد. ممنون از توجهتون
عنوان نظر :
نام شما :
ایمیل :
تلفن تماس :
*
نویسنده : بهاره شکری
تاریخ انتشار : 29/05/1392
تعداد بازدید : 4020