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

امروز به شما استفاده از افکت ()fadeToggle در جی کوئری را آموزش می دهیم.این افکت کار سوئیچ کردن بین افکت های ()fadeIn و ()fadeOut را انجام می دهد.

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

افکت ()fadeToggle عنصر مورد نظر را در صورت محو بودن نمایان می کند و اگر نمایان باشد آن را محو خواهد کرد.

Syntax:

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

Speed :

یک پارامتر اختیاری است که سرعت ظاهر شدن عنصر مورد نظر را تعیین می کند. مقدارهای قابل استفاده :

  • milliseconds
  • “slow”
  • “fast”

Callback :

یک تابع اختیاری است که پس از ظاهر شدن عنصر مورد نظر به نمایش درمی آید.

در زیر می توانید مثال هایی از این افکت را مشاهده فرمائید :

مثال اول  :

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeToggle();
    $("#div2").fadeToggle("slow");
    $("#div3").fadeToggle(3000);
  });
});
</script>
</head>
<body>

<p>Welcome to Farazgar</p>

<button>کلیک کنید</button><br><br>

<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

</body>
</html>

مثال دوم :

<!DOCTYPE html> 
<html> 

<head> 
    <title> 
        jQuery fadeToggle() Method 
    </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;" > 
            Welcome to Farazgar 
        </h1> 
    </div><br> 
    
    <button id = "btn"> 
        کلیک کنید
    </button> 
    
    <!-- Script to use fadeToggle() Method -->      
    <script> 
        $(document).ready(function() { 
            $("#btn").click(function() { 
                $("#Outer").fadeToggle(1000); 
            }); 
        }); 
    </script> 
</body> 

</html>


 

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

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

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