آموزش متدهای fade در جی کوئری
متدهای fade در جی کوئری
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 دریافت می کنند به شرح زیر هستند :
<!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 مخفی می کنیم:
<button>Click to fade Out </button>
<p>fadeOut method Example</p>
کد جی کوئری
$(document).ready(function(){
$("button").click(function(){
$("p").fadeOut();
});
});
مثال: در مثال زیر با فشردن دکمه button عنصر <p> در صفحه که مخفی است را توسط متد fadeTo و با ُرعت slow و با شفافیت .7 نمایان می کنیم.
<button>Click to fade to </button>
<p>fadeTo method Example</p>
کد جی کوئری
$(document).ready(function(){
$("button").click(function(){
$("p").fadeTo("slow ",.7);
});
});
نظرات کاربران