سلام به شمادوستان عزیز ف امیدوارم که خوب باشید. و با آموزش جلوه های بصری jQuery – پنهان سازی تدریجی یا Fading در خدمت شما هستم.جلوه های بصری jQuery – پنهان سازی تدریجی المان های HTML با قابلیت Fading

با استفاده از امکانات کتابخانه ی jQuery می توان المان های HTML را به صورت تدریجی از نظر محو نموده و یا نمایان ساخت.

در این خصوص jQuery چهار تابع زیر را ارائه می دهد:

fadeIn()

fadeOut()

fadeToggle()

fadeTo()

fadeIn()

تابع ()fadeIn یک المان مخفی (hidden) را با سرعتی معین که به عنوان پارامتر ورودی به آن ارسال می شود، پدیدار می سازد.

نحوه ی نگارش:

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

پارامتر اختیاری speed مدت زمان اجرای جلوه ی بصری را مشخص می کند؛ به عبارت روشن تر سرعت پدیدار شدن عنصر توسط جلوه ی بصری را تعریف می کند. می توان تابع یاد شده را با “slow”، “fast” و میلی ثانیه مقدار دهی نمود.

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

نمونه ی زیر، متد fadeIn() را در حالی که با پارامترهای مختلف تنظیم (set) و مقدار دهی شده، نمایش می دهد:

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

$(document).ready(function () {
$(“button”).click(function () {
$(“#div1”).fadeIn();
$(“#div2”).fadeIn(“slow”);
$(“#div3”).fadeIn(3000);
});
});

fadeOut()

با استفاده از این تابع می توان یک المان اچ تی ام ال نمایان را به تدریج از نظر محو ساخت.

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

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

پارامتر اختیاری speed سرعت محو شدن عنصر مورد نظر توسط جلوه ی بصری را تعیین می کند. می توان سه مقدار زیر را به عنوان پارامتر (Speed) به تابع مذکور ارسال کرد:

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

Callback تابعی است که بعد از اجرای کامل ()fadeOut و محو شدن المان، اجرا می شود.

نمونه ی زیر تابع ()fadeout را با چهار پارامتر مختلف نمایش می دهد:

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

$(document).ready(function () {
$(“button”).click(function () {
$(“#div1”).fadeOut();
$(“#div2”).fadeOut(“slow”);
$(“#div3”).fadeOut(3000);
});
});

fadeToggle()

fadeToggle() بین دو تابع fadeIn() و fadeOut() تغییر وضعیت می دهد.

چنانچه المان HTML ناپدید باشد، fadeToggle آن را بسته به پارامتر speed مشخص شده به تدریج پدیدار می سازد. اگر عنصر مورد نظر نمایان باشد، تابع مذکور آن را به تدریج محو می سازد.

دستور نگارش:

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

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

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

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

$(document).ready(function () {
$(“button”).click(function () {
$(“#div1”).fadeToggle();
$(“#div2”).fadeToggle(“slow”);
$(“#div3”).fadeToggle(3000);
});
});

متد fadeTo()

این متد درجه ی کدری یا وضوح نمایش یک عنصر را به طور تدریجی به یک مقدار تعیین شده توسط کاربر (بین ۰ و ۱) تغییر می دهد، می توان گفت که با بهره گیری از این متد طراح قادر خواهد بود میزان نور نمایش یک عنصر را کاسته یا افزایش دهد.

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

$(selector).fadeTo(speed,opacity,callback);

در این متد استفاده از پارامتر speed الزامی بوده و سرعت محو شدن المان HTML را مشخص می کند، این پارامتر می تواند با value های “”slow، fast”” و یا میلی ثانیه مقدار دهی شود.

پارامتر opacity نیز الزامی بوده و میزان یا درجه ی شفافیت المان دلخواه را تنظیم می کند (بین مقدار ۱ تا ۰).

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

مثال زیر این متد را با پارامترهای مختلف نمایش می دهد:

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

$(document).ready(function () {
$(“button”).click(function () {
$(“#div1”).fadeTo(“slow”, 0.15);
$(“#div2”).fadeTo(“slow”, 0.4);
$(“#div3”).fadeTo(“slow”, 0.7);
});
});