آموزش متدهای fade در جی کوئری

1396/9/4 علیرضا حاتمی نیا 369
 

 

درود خدمت شما همراهان گرامی وبسایت آموزش برنامه نویسی و طراحی وب . امروز با جلسه هفتم از آموزش جی کوئری در خدمت شما هستم. در جلسه پیش مبحث افکت ها در جی کوئری را آغاز کردیم و با آموزش متدهای show,hide,toggle در خدمت شما بودیم. در این جلسه با آموزش متدهای fade در جی کوئری آشنا میشویم.

متدهای fade در جی کوئری

کلمه fade در زبان انگلیسی به معنای "محو کردن" است. یکی از افکتهای جی کوئری fade کردن یا محو کردن یک عنصر می باشد که این کار را در جی کوئری به راحتی و به زیبایی می توانید انجام دهید. محو کردن عناصر در جی کوئری به 4 صورت یا توسط 4 متد انجام می گیرد. شما توسط این 4 متد می توانید یک یا چند عنصر نمایان در صفحه را محو یا کمرنگ کرده و سپس مخفی نمایید و یا وضوح یا شفافیت یک یا چند عنصر پنهان را کم کم نمایان کنید.

4 متد جهت fade کردن در جی کوئری عبارتند از:

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

در ادامه به توضیج کامل این متدها می پردازیم.

متد fadeIn در جی کوئری

در جی کوئری توسط متد fadeIn می توانید عناصر پنهان یا Hidden در صفحه را به صورت محو شونده نمایش دهید.

این متد به شکل زیر تعریف می شود: 
$(selector).fadeIn(speed,callback);

متد fadeout در جی کوئری:

در جی کوئری توسط متد fadeOut می توانید عناصر نمایان در صفحه را به صورت محو شونده پنهان کنید.

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

متد fadeToggle در جی کوئری:

متد fadeToggle در جیکوئری ترکیبی از دو متد fadeIn و fadeout می باشد. به این معنی که با استفاده از متد fadeToggle می توانید عناصر نمایان در صفحه را پنهان کنید و یا عناصر پنهان در صفحه را نمایان کنید. 

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

متد fadeTo در جی کوئری:

متد fadeTo  پارامتری اضافه جهت رساندن حالت محو با شفافیت یا opacity معینی در صفحه برای عنصر مورد نظردریافت می کند.

متد fadeTo به شکل زیر تعریف می شود:

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

پارامترهایی که 4 متد fadeIn,fadeout,fadeToggle,fadeTo دریافت می کنند به شرح زیر هستند :

پارامتر speed : این پارامتر در هر 4 متد fadeIn,fadeout,fadeToggle,fadeTo اختیاری می باشد. توسط این پارامتر می توانید سرعت مخفی شدن یا نمایش دادن عنصر مربوطه  را تعیین کنید. مقدار این پارامتر می تواند کلمات کلیدی "slow" , "fast" یا عددی بر حسب میلی ثانیه باشد.
پارامتر callback : این پارامتر در هر 4 متد fadeIn,fadeout,fadeToggle,fadeTo اختیاری می باشد. توسط این پارامتر می توانید یک تابع را پس از اجرا شدن کامل متدهای fadeIn,fadeout,fadeToggle,fadeTo اجرا کنید.
پارامتر opacity : این پارامتر را فقط متد fadeTo دریافت می کند که عددی بین 0 تا 1 جهت تعیین میزان شفافیت می باشد.
در ادامه چند مثال جهت تفهیم بیشتر این آموزش به کار می بریم.
مثال: در مثال زیر با فشردن دکمه button عنصر <p> در صفحه که display آن برابر hidden است را به صورت fadeIn نمایان می کنیم:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
p {
display: none;
    
}
</style>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").fadeIn();
    });
});
</script>
</head>
<body>
<button>Click to fade in </button>
<p>fadeIn method Example</p>
</body>
</html>

مثال: در مثال زیر با فشردن دکمه button عنصر <p> در صفحه را توسط متد fadeOut مخفی می کنیم:

عناصر Html
<button>Click to fade Out </button>
<p>fadeOut method Example</p>

کد جی کوئری

$(document).ready(function(){
    $("button").click(function(){
        $("p").fadeOut();
    });
});
مثال: در مثال زیر با فشردن دکمه button عنصر <p> در صفحه که مخفی است را توسط متد fadeTo و با ُرعت slow و با شفافیت .7 نمایان می کنیم.
عناصر Html
<button>Click to fade to </button>
<p>fadeTo method Example</p>

کد جی کوئری

$(document).ready(function(){
    $("button").click(function(){
        $("p").fadeTo("slow ",.7);
    });
});

 

کلمات کلیدی

علیرضا حاتمی نیا
طراح و برنامه نویس وب
طراحی وبسایت های واکنش گرا
طراحی و پیاده سازی سیستم مدیریت محتوا
سئو و بهینه سازی سایت