افکت ()fadeIn در جی کوئری :
امروز به شما استفاده از افکت ()fadeIn در جی کوئری را آموزش می دهیم. افکت ()fadeIn عنصر مورد نظر در صفحه سایت را از حالت مخفی به نمایان تغییر می دهد.
عنصرهای مخفی در سایت در حالت طبیعی به نمایش در نمی آیند و بدیهی است افکت ()fadeIn بر روی عنصرهایی که از قبل مخفی هستند قابل اجرا است.
Syntax:
$(selector).fadeIn( speed, easing, callback )
Speed :
یک پارامتر اختیاری است که سرعت ظاهر شدن عنصر مورد نظر را تعیین می کند و بصورت پیشفرض ۴۰۰ میلی ثانیه است.مقدارهای قابل استفاده :
- milliseconds
- “slow”
- “fast”
Easing :
یک پارامتر اختیاری است که سرعت ظاهر شدن عنصر مورد نظر را به بخش های مختلف انیمیشن می دهد.مقدارهای قابل استفاده :
- “swing”
- “linear”
Callback :
یک تابع اختیاری است که پس از ظاهر شدن عنصر مورد نظر به نمایش درمی آید.
در زیر می توانید مثال هایی از افکت ()fadeIn را مشاهده فرمائید :
مثال ( استفاده از سرعت ۱۰۰۰ میلی ثانیه) :
<!DOCTYPE html>
<html>
<head>
<title>
fadeIn() Method in jQuery
</title>
<style>
#Outer {
border: 1px solid black;
padding-top: 40px;
height: 140px;
background: green;
display: none;
}
</style>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body style = "text-align:center;">
<div id= "Outer">
<h1 style = "color:white;" >
Farazgar
</h1>
</div><br>
<button id = "btn">
Fade In
</button>
<!-- jQuery script of fadeIn() method -->
<script>
$(document).ready(function() {
$("#btn").click(function() {
$("#Outer").fadeIn(1000);
});
});
</script>
</body>
</html>
مشاهده نتیجه
Farazgar
از اینکه فرازگر را در این مقاله همرایی کردید از شما سپاسگذاریم.
سایت کتابخانه جی کوئری : www.jquery.com
مقاله پیشنهادی :
