نمایش کشویی/اسلایدی المان ها

دوستان عزیز در درس قبلی با نحوه ی محو کردن تدریجی المان ها با استفاده از ایفکت fading آشنا شدید. اما همانطور که میدانید گاهی نمایش اسلایدی و کشویی المان ها بر ایفکت نمایش/پنهان سازی تدریجی ارجحیت دارد. برای این منظور jQuery چندین متد کارآمد ارائه می دهد.

در مثال زیر با بهره گیری از متدslideDown() یک المان div که شناسه ی آن divTestArea1 می باشد را به صورت کشویی نمایش می دهیم:

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

Show box

function ShowBox() {
$(“#divTestArea1”).slideDown();
}

حال برای پنهان نمودن این کادر به صورت کشویی، از متد slideup() استفاده می کنیم. این دو متد پارامترهای یکسان را می پذیرند که همگی اختیاری هستند. اولین پارامتر سرعت نمایش کشویی المان را تنظیم می کند. می توانید سرعت اجرای ایفکت را به سه مقدار “fast”، “slow” یا میلی ثانیه تنظیم نمایید. مثال:

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

Show boxes

function ShowBoxes() {
$(“#divTestArea21”).slideDown(“fast”);
$(“#divTestArea22”).slideDown(“slow”);
$(“#divTestArea23”).slideDown(2000);
}

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

پارامتر دوم یک تابع callback می باشد که با اجرای کامل ایفکت نمایش اسلایدی اجرا می شود. استفاده از این پارامتر کاملا اختیاری می باشد. در زیر مثال دیگری را مشاهده می کنید که اثر متد slideup() را به نمایش می گذارد:

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

$(function () {
$(“#divTestArea3”).slideDown(2000, function () {
$(“#divTestArea3”).slideUp(3000);
});
});

در مثال فوق، تابع callback به محض اجرای کامل ایفکت نمایش اسلایدی عنصر به پایین (متد SlideDown()) صدا زده می شود و بلافاصله پس از آن متد SlideUp() فراخوانی می گردد (و المان مورد نظر باز به صورت کشویی جمع می شود).

تیم طراحان کتابخانه ی jQuery متد دیگری به نام slideToggle() را ارائه کرده است که بین دو حالت slidedown و slideup تغییر وضعیت می دهد. این متد بسته به وضعیت جاری المان، آن را به صورت کشویی نمایش می دهد یا (در صورت نمایان بودن) المان مورد نظر را جمع می کند.

نمونه چهار
?
۱
۲
۳
۴
۵
۶
۷

Toggle box

function ToggleBox() {
$(“#divTestArea4”).slideToggle(“slow”);
}