متدهای fade

افکت‌های محو شدن (Fading)

متدهای fade عنصر را به‌تدریج شفاف یا مات می‌کنند — درست مثل محو شدن یک تصویر. jQuery چهار متد fade دارد:

سینتکس

$(selector).fadeIn(speed, callback);
$(selector).fadeOut(speed, callback);
$(selector).fadeToggle(speed, callback);
$(selector).fadeTo(speed, opacity, callback);

• speed: "slow"، "fast" یا میلی‌ثانیه
• opacity: عددی بین ۰ (کاملاً شفاف) و ۱ (کاملاً مات) — اجباری در fadeTo
• callback: تابع اجرا شونده پس از پایان

مثال‌ها

// محو شدن آهسته
$("div").fadeOut("slow");

// ظاهر شدن در یک ثانیه
$("div").fadeIn(1000);

// تغییر شفافیت به ۵۰٪
$("div").fadeTo("slow", 0.5);

تفاوت fade و hide

مثال کاربردی: محو شدن پیام‌های اطلاع‌رسانی

// نمایش پیام موفقیت و محو شدن خودکار بعد از ۳ ثانیه
$("#success-msg").fadeIn(400);

setTimeout(function() {
    $("#success-msg").fadeOut(400);
}, 3000);

جمع‌بندی

• چهار متد fade: fadeIn، fadeOut، fadeToggle و fadeTo
• fadeTo پارامتر اجباری opacity دارد (۰ تا ۱)
• fade حس محو شدن نرم دارد و برای پیام‌ها و تصاویر عالی است