افکت Fade در jQuery

در این آموزش , قصد داریم در مورد لیست متد های افکت Fade در jQuery بیشتر بدانیم . چهار متد برای ساخت افکت های fade بر روی المنت های HTML وجود دارد.

fadeIn() – نمایش المنت محو شده
fadeIn() – محو کردن المنت
fadeTo() – محو کردن المنت با تغییر opacity
fadeToggle() – نمایش / مخفی کردن المنت محو شده / مورد نظر

کد HTML

این کد HTML شامل المنت های تصاویر و دکمه ها برای فراخوانی متدهای جی کوئری برای ایجاد افکت Fade در jQuery هستند.

<div id="menu">
<input type="button" value="Fade In" id="fade-in" />
<input type="button" value="Fade Out" id="fade-out" />
<input type="button" value="Fade To" id="fade-to" />
<input type="button" value="Fade Toggle" id="fade-toggle" />
</div>
<div id="output"><img src="fading-photo.png" id="fading-photo" /></div>

</div>

کد jQuery افکت fade

این کد برای انجام عملیات Fade با استفاده از رویداد Click استفاده شده است .

$(document).ready(function() {
$("#fade-in").click(function() {
  $( "#fading-photo" ).fadeIn("slow");
});
$("#fade-out").click(function() {
  $( "#fading-photo" ).fadeOut("slow");
});
$("#fade-to").click(function() {
  $( "#fading-photo" ).fadeTo("slow", 0.5);
});
$("#fade-toggle").click(function() {
  $( "#fading-photo" ).fadeToggle("slow", "linear");
});
});