افکت ()fadeIn در جی کوئری :

امروز به شما استفاده از افکت ()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>
مشاهده نتیجه
fadeIn() Method in jQuery

Farazgar


از اینکه فرازگر را در این مقاله همرایی کردید از شما سپاسگذاریم.

سایت کتابخانه جی کوئری : www.jquery.com

مقاله پیشنهادی :

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *