متدهای slide

افکت‌های کشویی: slideDown، slideUp و slideToggle

افکت‌های کشویی (Sliding)

متدهای slide عنصر را با حرکت کشویی (مثل پرده تئاتر) مخفی و نمایش می‌دهند. این افکت برای منوهای بازشو، پنل‌ها و آکاردئون‌ها بسیار محبوب است:

متدکار
slideDown()نمایش عنصر با کشویی به پایین
slideUp()مخفی کردن عنصر با کشویی به بالا
slideToggle()ترکیب دو متد بالا

سینتکس

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

مثال: پنل بازشو

// کلیک روی عنوان، پنل را باز و بسته می‌کند
$("#panel-title").click(function() {
    $("#panel-body").slideToggle("slow");
});

تفاوت سه افکت اصلی

افکتچه چیزی تغییر می‌کندحس بصری
hide/showعرض و ارتفاع و شفافیتجمع شدن
fadeفقط شفافیتمحو شدن
slideفقط ارتفاعباز و بسته شدن پرده

مثال کاربردی: منوی آکاردئونی

آکاردئون یکی از رایج‌ترین الگوهای رابط کاربری است — فقط یک بخش باز بماند:

$(".accordion-header").click(function() {
    // بستن همه بخش‌ها
    $(".accordion-body").slideUp();

    // باز کردن بخش کلیک‌شده (اگر بسته است)
    var $body = $(this).next(".accordion-body");
    if (!$body.is(":visible")) {
        $body.slideDown();
    }
});
برای آکاردئون حرفه‌ای‌تر می‌توانید از متد stop() قبل از slideToggle استفاده کنید تا اگر کاربر سریع چند بار کلیک کرد، انیمیشن‌ها روی هم نیفتند: $(this).stop().slideToggle()

جمع‌بندی

این مبحث بخشی از دوره آموزش کامل jQuery است.

ابزارهای مرتبط