سلام دوستای عزیز ، امیدوارم که خوب و سلامت باشید. دراین قسمت میپردازیم به آموزش افکت های jquery-توابع مربوط به Slide
جلوه های بصری jQuery – ایفکت Slide

متد slide المان های HTML را به صورت تدریجی (و با حالت کشویی) از وضعیت نمایان به مخفی و بالعکس نمایش می دهد.

توابع مربوط به Slide

تحت چارچوب کاری jQuery می توان المان های HTML (یک لیست) را بصورت کشویی پنهان ساخته و یا نمایان کرد.

توابعی که برای نیل به این هدف در jQuery نظرگرفته شده اند عبارتند از:

()slideDown

()slideUp

()slideToggle

تابع slideDown()

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

دستور نگارش:

$(selector).slideDown(speed,callback);

پارامتر اختیاری speed سرعت نمایش المان مورد نظر را تعیین می کند (مشخص می کند یک لیست کشویی سریع پایین کشیده و نمایش داده شود یا کند). می توان سه مقدار “slow”، “fast” و میلی ثانیه را به عنوان پارامتر به این تابع ارسال کرد.

پارامتر اختیاری callback یک تابع است که با جرای کامل متد مزبور (sliding)، اجرا می شود.

مثال زیر کاربر متد slideDown() را به نمایش می گذارد:

نمونه یک
?
۱
۲
۳
۴
۵
۶
۷

$(document).ready(function () {
$(“#flip”).click(function () {
$(“#panel”).slideDown(“slow”);
});
});

متد slideUp()

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

دستور نگارشی:

$(selector).slideUp(speed,callback);

پارامتر اختیاری speed سرعت پنهان شدن المان مورد نظر را تعیین می کند. این پارامتر قادر است مقادیر زیر را بپذیرد:

“slow”، “fast” و میلی ثانیه.

پارامتر اختیاری callback یک تابع است که پس از اجرای کامل متد ()slideup اجرا می شود.

مثال استفاده از این متد را نمایش می دهد:

نمونه دو
?
۱
۲
۳
۴
۵
۶
۷

$(document).ready(function () {
$(“#flip”).click(function () {
$(“#panel”).slideUp(“slow”);
});
});

متد slideToggle()

این متد بین دو متد slideup() و slidedown() تغییر وضعیت می دهد. کاری که این جلوه ی بصری (slideToggle) انجام می دهد این است که ابتدا وضعیت نمایش (یا مخفی بودن) عنصر را بررسی کرده و در صورتی که آن عنصر پدیدار باشد، با کاهش تدریجی ارتفاع آن سبب می شود عنصر مربوطه ناپدید شود و چنانچه المان HTML مد نظر ناپیدا باشد ارتفاع آن را اندک اندک افزوده تا عنصر پدیدار شود.

ساختار نگارشی:

$(selector).slideToggle(speed,callback);

پارامتر اختیاری speed می تواند مقادیر روبرو را بپذیرد: “slow”، “fast” و میلی ثانیه.

پارامتر اختیاری callback یک تابع است که پس از اجرای کامل متد slideToggle() اجرا می شود.

مثال زیر، چگونگی بکار بردن متد ()slideToggle را نمایش می دهد:

نمونه سه
?
۱
۲
۳
۴
۵
۶
۷

$(document).ready(function () {
$(“#flip”).click(function () {
$(“#panel”).slideToggle(“slow”);
});
});