افکت محو شدن (Fade)

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

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

افکت محو شدن (Fade Effect) یعنی عنصر ناگهان غیب نمی شود. بلکه شفافیتش کم می شود تا ناپدید شود یا برعکس زیاد می شود تا دیده شود. این کار با تغییر ویژگی شفافیت (Opacity) انجام می شود.

jQuery چهار متد اصلی برای افکت محو شدن دارد: fadeIn()، fadeOut()، fadeToggle() و fadeTo(). هر کدام کنترل متفاوتی روی ظاهر شدن و محو شدن می دهند.

fadeIn()؛ ظاهر کردن آرام عناصر مخفی

متد fadeIn() یک عنصر مخفی را آرام آرام ظاهر می کند. در مثال منبع، وقتی روی دکمه کلیک می کنی، سه باکس با سرعت های مختلف ظاهر می شوند. یکی سریع، یکی متوسط و یکی خیلی آرام.

$("button").click(function() {
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});

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

پارامتر speed مدت زمان افکت است. می تواند "slow"، "fast" یا یک عدد میلی ثانیه باشد؛ مثلا 3000 یعنی سه ثانیه. بعد از تمام شدن افکت، می توانی با پارامتر callback کار جدیدی انجام دهی.

fadeOut()؛ محو کردن آرام عناصر قابل مشاهده

متد fadeOut() برعکس fadeIn() است. این متد عناصر قابل مشاهده را کم کم محو می کند تا ناپدید شوند. همه چیز باز هم با پارامتر سرعت کنترل می شود.

$("button").click(function() {
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
});

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

برای ساخت یک رابط کاربری نرم، معمولا محو شدن بهتر از مخفی کردن ناگهانی است. مثلا وقتی کاربر یک پیام را می خواند، پیام را با fadeOut() محو کن تا حس بهتری بگیرد.

fadeToggle()؛ سوییچ بین محو شدن و ظاهر شدن

متد fadeToggle() ترکیب fadeIn() و fadeOut() است. اگر عنصر دیده شود، آن را محو می کند. اگر مخفی باشد، آن را ظاهر می کند. بنابراین فقط یک دکمه برای هر دو حالت کافی است.

$("button").click(function() {
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});

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

این متد برای منوهای بازشونده، پنل های راهنما و باکس های اطلاع رسانی خیلی مناسب است. می توانی آن را با نمایش/مخفی کردن jQuery و افکت های دیگر ترکیب کنی.

fadeTo()؛ کنترل شفافیت با عدد بین 0 تا 1

متد fadeTo() کمی خاص تر است. این متد عنصر را تا یک مقدار شفافیت مشخص می برد. شفافیت (Opacity) عددی بین 0 و 1 است. صفر یعنی کاملا نامرئی و یک یعنی کاملا واضح.

$("button").click(function() {
  $("#div1").fadeTo("slow", 0.15);
  $("#div2").fadeTo("slow", 0.4);
  $("#div3").fadeTo("slow", 0.7);
});

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

با این متد می توانی پس زمینه ها یا کارت ها را نیمه شفاف کنی. مثلا کارت غیرفعال کمی محوتر دیده شود. این کار تجربه کاربری را واضح تر می کند و وضعیت را نشان می دهد.

گام های عملی برای تمرین افکت محو شدن jQuery

1. اول مطمئن شو فایل jQuery را در صفحه اضافه کرده ای. اگر شک داری، به صفحه شروع کار با jQuery سر بزن.
2. یک صفحه ساده بساز و سه <div> رنگی کنار هم قرار بده. به هرکدام یک id مثل div1، div2 و div3 بده.
3. مثال افکت محو شدن jQuery با fadeIn() را اضافه کن. سرعت های مختلف را امتحان کن تا حس تفاوت را ببینی.
4. حالا در همان صفحه، کد fadeOut() و fadeToggle() را هم تست کن. با یک دکمه ساده، ظاهر و محو شدن کارت ها را کنترل کن.
5. در پایان، با افکت اسلاید jQuery هم ترکیب کن. مثلا کارت هم محو شود و هم اسلاید کند.

نکات تکمیلی و مرجع افکت ها

نکته: تمام این متدها جزو افکت های jQuery هستند. در منبع، مرجعی به نام jQuery Effect Reference وجود دارد که فهرست همه افکت ها را نشان می دهد.

اگر می خواهی خودت را محک بزنی، می توانی از تمرین محو شدن در آدرس Exercise Fade استفاده کنی. همچنین متن کامل منبع در صفحه jQuery Fade قرار دارد.

جمع بندی سریع

• fadeIn() عناصر مخفی را به آرامی ظاهر می کند.
• fadeOut() عناصر قابل مشاهده را به آرامی محو می کند.
• fadeToggle() بین محو شدن و ظاهر شدن جابه جا می شود.
• fadeTo() تا یک شفافیت مشخص بین 0 و 1 محو می کند.
• پارامتر speed مدت زمان افکت محو شدن jQuery را تعیین می کند.