اسلاید (Slide)

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

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

افکت اسلاید (Slide Effect) یعنی عنصر ناگهان غیب نشود. بلکه ارتفاعش کم و زیاد شود و شبیه کشوی میز، بالا و پایین برود. این کار برای منوی موبایل، FAQ و پنل های تاشو خیلی کاربردی است.

در jQuery سه متد اصلی برای افکت اسلاید وجود دارد: slideDown()، slideUp() و slideToggle(). همه این ها یک پارامتر سرعت و یک تابع callback اختیاری هم دارند.

متد slideDown() در افکت اسلاید jQuery

متد slideDown() عنصر را از حالت جمع شده به حالت باز شده می برد. یعنی انگار درِ پنل از بالا به پایین باز می شود و محتوا دیده می شود.

$("#flip").click(function() {
  $("#panel").slideDown();
});

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

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

متد slideUp() برای بستن پنل ها

متد slideUp() برعکس قبلی است. این متد عنصر را از حالت باز به حالت جمع شده می برد؛ مثل وقتی منو را می بندی و رو به بالا جمع می شود.

$("#flip").click(function() {
  $("#panel").slideUp();
});

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

این متد هم مثل slideDown() پارامتر سرعت و callback دارد. می توانی بعد از بسته شدن پنل، پیام بدهی یا دکمه ای را فعال کنی.

متد slideToggle()؛ سوییچ بین باز و بسته

متد slideToggle() ترکیب slideDown() و slideUp() است. اگر پنل باز باشد، آن را می بندد. اگر بسته باشد، آن را باز می کند. بنابراین فقط یک دکمه برای هر دو حالت کافی است.

$("#flip").click(function() {
  $("#panel").slideToggle();
});

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

در منبع، همین کد روی یک پنل ساده اجرا شده است. با هر کلیک روی عنصر #flip، پنل #panel بالا و پایین می شود. این یک نمونه کلاسیک از افکت اسلاید jQuery است.

کار با سرعت و callback در افکت اسلاید jQuery

در همه متدهای اسلاید، پارامتر speed و callback یکسان عمل می کنند. سرعت یعنی مدت اسلاید. callback یعنی تابعی که بعد از پایان حرکت اسلاید اجرا می شود.

مثلا می توانی بعد از slideDown() متن راهنما را با افکت محو شدن jQuery کمی ظاهر کنی. یا بعد از slideUp() یک انیمیشن کوچک با انیمیت jQuery اجرا کنی.

گام های عملی برای تمرین اسلاید (Slide)

1. یک صفحه ساده HTML بساز و یک دکمه با id برابر flip و یک <div> با id برابر panel قرار بده.
2. کد متد slideDown() را از مثال بالا کپی کن. یک بار با "slow" و یک بار با میلی ثانیه تست کن تا افکت اسلاید jQuery را خوب حس کنی.
3. کد را به slideUp() و سپس slideToggle() تغییر بده. ببین با یک کلیک چطور باز و بسته می شود.
4. در پایان، این افکت اسلاید jQuery را در یک منوی ساده سایتت استفاده کن. مثلا منوی موبایل که با کلیک روی آیکن، سر می خورد.

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

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

اگر می خواهی خودت را تست کنی، تمرین اسلاید در آدرس Exercise Slide قرار دارد. متن و مثال های کامل هم در صفحه jQuery Sliding آمده است.

جمع بندی سریع

• slideDown() پنل را رو به پایین باز می کند.
• slideUp() پنل را رو به بالا جمع می کند.
• slideToggle() بین باز و بسته جابه جا می شود.
• پارامتر speed مدت افکت اسلاید jQuery را تعیین می کند.
• پارامتر callback بعد از پایان اسلاید اجرا می شود.