افکت Fade در jQuery

در jQuery می توانید یک عنصر را محو کرده و قابلیت مشاهده آن را کم و زیاد کنید.

متد های fading در jQuery

jQuery شامل متد های fade زیر است:

• ()fadeIn
• ()fadeOut
• ()fadeToggle
• ()fadeTo
   

متد ()fadeIn

متد ()fadeIn  برای  ظاهر شدن تدریجی عناصر مخفی به کار می رود.

شکل دستوری:

پارامتر سرعت اختیاری بوده و مدت زمان افکت را مشخص می کند.  مقادیر زیر را می تواند قبول کند:
•    slow
•    fast
•    مدت زمان به  milliseconds

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

مثال زیر روش کار متد ()fadeIn را با پارامترهای مختلف نشان می دهد:
 

مثال :

$("button").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
}); 

متد  fadeOut()

متد  ()fadeOut برای کاهش قابلیت مشاهده عناصر به کار می رود. به عبارتی دیگر  ، عنصر را به تدریج محو می کند و عنصر نهایتا مخفی می شود.

شکل دستوری:

پارامتر سرعت اختیاری بوده و مدت زمان افکت را مشخص می کند. این پارامتر مقادیر زیر را می تواند قبول کند:
•    slow
•    fast
•    مدت زمان به  milliseconds
پارامتر اختیاری callback تابعی است که پس از پایان اجرای تابع fade اجرا خواهد شد.

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

$("button").click(function(){
    $("#div1").fadeOut();
    $("#div2").fadeOut("slow");
    $("#div3").fadeOut(3000);
}); 

متد  fadeToggle

متد  fadeToggle بین دو متد ()fadeIn و ()fadeout سوییچ ایجاد می کند.

اگر روی عناصر افکت fade out انجام شده باشد، پس متد ()fadeToggle   آن عناصر را fade in   خواهد  کرد.
اگر روی عناصر افکت fade In انجام شده باشد، پس متد  ()fadeToggle آن عناصر را fade out   خواهد  کرد.

شکل دستوری :

پارامتر سرعت اختیاری بوده و مدت زمان افکت را مشخص می کند. این پارامتر مقادیر زیر را می تواند قبول کند:
•    slow
•    fast
•    مدت زمان به  milliseconds
پارامتر اختیاری callback تابعی است که پس از پایان اجرای تابع fade اجرا خواهد شد.

مثال زیر روش کار متد ()fadeToggle را با پارامترهای مختلف نشان می دهد:

$("button").click(function(){
    $("#div1").fadeToggle();
    $("#div2").fadeToggle("slow");
    $("#div3").fadeToggle(3000);
}); 

متد ()fadeto

متد ()fadeto این امکان را می دهد هنگام اعمال fading ، شفافیت عنصر را نیز تغییر دهید( مقداری بین 0 و 1).

شکل دستوری:

پارامتر سرعت الزامی است و مدت زمان این افکت را معین می کند. مقادیر زیر را می تواند قبول کند:
•    slow
•    fast
•    مدت زمان به  milliseconds
پارامتر شفافیت (opacity) در متد ()fadeto الزامی است و میزان شفافیت عنصر را با مقداری بین 0 و 1 تعیین می کند.
پارامتر اختیاری callback تابعی را مشخص می کند که بعد از اجرای کامل این متد، اجرا خواهد شد.

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

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