افکت محو کردن المان ها به صورت تدریجی

سلام دوستان ، حال شما چظوره؟ امیدوارم که حالتون خوب باشه و شاد وسلامت باشید. در این قسمت افکت محو کردن المان ها به صورت تدریجی را میخوام آموزش بدم.

اجرای افکت ساده ی animation با jQuery بسیار ساده می باشد. یکی از ایفکت های اضافی بر سازمان که jQuery از آن پشتیبانی می کند، محو/نمایان کردن المان ها به صورت تدریجی می باشد. در زیر مثالی ساده مشاهده می کنید که یک کادر پنهان را به تدریج نمایان می سازد:

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

Show box

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

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

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

Show boxes

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

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

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

$(function () {
$(“#divTestArea3”).fadeIn(2000, function () {
$(“#divTestArea3”).fadeOut(3000);
});
});

گاهی لازم است یک المان را بسته وضعیت فعلی آن به تدریج نمایان ساخته یا پنهان نمایید. ابتدا بررسی می کنیم آیا المان مورد نظر نمایان است یا خیر. سپس بسته به وضعیت آن، تابع fadeIn() یا fadeOut() را صدا می زنید. اما jQuery یک متد به نام fadeToggle() ارائه کرده است که بین دو حالت نمایان و پنهان تغییر حالت می دهد. این متد همان پارامترهای دو متد نام برده را می پذیرد و استفاده از آن بسیار ساده می باشد:

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

Toggle box

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