افکت ها (Effects Reference)

در این صفحه با افکت های jQuery آشنا می شوی. افکت (Effect) یعنی انیمیشن ساده روی عناصر؛ مثل مخفی شدن، ظاهر شدن یا Slide شدن یک جعبه روی صفحه.

افکت های jQuery دقیقا چه کار می کنند؟

در منبع، یک جدول از همه متدهای افکت jQuery آمده است. این متدها روی ظاهر عناصر کار می کنند؛ مثلا آنها را کم کم محو یا نمایش می دهند.

بعضی متدها برای محو و نمایش هستند؛ مثل fadeIn()، fadeOut()، fadeToggle()، fadeTo(). بعضی دیگر برای Slide هستند؛ مثل slideDown()، slideUp() و slideToggle().

متدهای ساده show() و hide() هم در جدول دیده می شوند. این ها یک باره عنصر را نشان می دهند یا مخفی می کنند.

مدیریت صف افکت ها و انیمیشن ها

jQuery برای افکت های پشت سرهم از صف (Queue) استفاده می کند. صف یعنی لیستی از کارها که به ترتیب اجرا می شوند؛ مثل صف سلف مدرسه.

• queue() صف توابع افکت را نشان می دهد.
• dequeue() تابع بعدی در صف را برمی دارد و اجرا می کند.
• clearQueue() بقیه توابع منتظر در صف را پاک می کند.
• delay() بین توابع صف، مکث اضافه می کند.
• stop() انیمیشن در حال اجرا را متوقف می کند.
• finish() همه انیمیشن های صف را تمام و پاک می کند.

نکته: با صف افکت ها می توانی چند انیمیشن پشت سرهم بسازی؛ مثل چند حرکت پشت سرهم در یک بازی.

نمونه کد ساده با افکت های jQuery

یک مثال خیلی ساده از افکت های jQuery ببین. این کد با دکمه، یک جعبه را محو و ظاهر می کند.

$(document).ready(function() {
  $("#btnToggle").click(function() {
    $("#box").fadeToggle(400);
  });
});

مشاهده در ادیتور

اینجا از متد fadeToggle() استفاده کردیم. این متد بین fadeIn() و fadeOut() جابجا می شود. عدد 400 یعنی مدت انیمیشن حدود 400 میلی ثانیه است.

چطور از رفرنس افکت ها استفاده کنیم؟

برای کار درست با افکت های jQuery این گام ها کمک می کنند:

1. اول تصمیم بگیر عنصر کدام است؛ مثلا یک جعبه یا منو.
2. در جدول رفرنس ببین کدام افکت مناسب است؛ مثلا slideDown().
3. متد را روی انتخاب گر دلخواه اجرا کن.

اگر درباره انتخاب گرها مطمئن نیستی، صفحه انتخاب گرها (Selectors Reference) کمک بزرگی است. چون افکت ها روی انتخاب درست عنصرها معنی می دهند.

برای درک تصویر کلی رفرنس jQuery هم می توانی به صفحه نمای کلی (Overview) سر بزنی. آن جا می بینی افکت ها کنار رویدادها و HTML/CSS قرار گرفته اند.

اگر می خواهی افکت ها را همراه با رویدادهای jQuery استفاده کنی، دیدن صفحه رویدادها (Events Reference) هم مفید است. چون معمولا افکت ها را داخل هندلر رویداد قرار می دهیم.

نکته: برای سئو داخلی سایت، می توانی از لینک افکت های jQuery در مقالات دیگر استفاده کنی تا این صفحه قوی تر شود.

افکت ها در رابط کاربری واقعی

در سایت واقعی، افکت ها باید کم و حساب شده باشند. افکت زیاد مثل فیلتر سنگین روی استوری است؛ اول جذاب است اما بعد خسته کننده می شود.

• برای باز و بسته کردن منو از slideToggle() استفاده کن.
• برای نمایش پیام موفقیت از fadeIn() و fadeOut() استفاده کن.
• برای نمایش Loader می توانی از show() و hide() کمک بگیری.

هشدار: تعداد افکت های هم زمان را زیاد نکن. این کار می تواند سایت را کند کند و کاربر را سردرگم کند.

جمع بندی سریع

• افکت های jQuery برای انیمیشن های ساده روی عناصر استفاده می شوند.
• جدول رفرنس، همه متدهای مهم افکت را یک جا نشان می دهد.
• متدهایی مثل fadeToggle() و slideToggle() برای منوها عالی اند.
• صف افکت ها با queue()، delay() و stop() مدیریت می شود.
• افکت زیاد نگذار؛ تعادل بین سادگی و جذابیت را نگه دار.