jQuery UI Fade Effect

In this article, we are going to show the effect of fade using jQueryUI, all the content will fade out when the action button is clicked which actually triggers the fade effect script.

Syntax:

$( ".selector" ).effect( 
    selectedEffect, options, time(in ms), callback 
);

Parameters:

selectedEffect: Effect selected given in jQueryUI.
options: Added for certain functionality (optional).
time: time to complete the effect in microseconds.
callback: Added for certain functionality (optional).

Return Value: It does not return any value.

Scripts added:

Please download the library for including pre-compiled files or use the path for the given script below.

<link rel=”stylesheet” href=”//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css”>

<script src=”https://code.jquery.com/jquery-1.12.4.js”></script>

<script src=”https://code.jquery.com/ui/1.12.1/jquery-ui.js”></script>

Example: In this example, we are going to show the fade effect using jQueryUI. We will trigger the script using a button.

HTML

<!doctype html> 
<html lang="en"> 
  
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1"> 
  
    <link rel="stylesheet" href= 
"//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
  
    <script src= 
        "https://code.jquery.com/jquery-1.12.4.js"> 
    </script> 
  
    <script src= 
        "https://code.jquery.com/ui/1.12.1/jquery-ui.js"> 
    </script> 
  
    <script> 
        $(function() { 
            function action(selectedEffect) { 
                $("#effect").effect(selectedEffect, 1200); 
            }; 
            $("#button").on("click", function() { 
                action("fade"); 
                return false; 
            }); 
        }); 
    </script> 
  
    <style> 
        .animation { 
            width: 500px; 
            height: 500px; 
            position: absolute; 
        } 
          
        #button { 
            padding: .5em 1em; 
            text-decoration: none; 
            position: absolute; 
        } 
          
        #effect { 
            width: 250px; 
            height: 190px; 
            padding: 15px; 
            position: relative; 
        } 
    </style> 
</head> 
  
<body> 
    <h3> 
        Beginner for Beginner Fade  
        Effect Using jQuery UI 
    </h3> 
  
    <div class="animation"> 
        <div id="effect" class= 
            "ui-widget-content ui-corner-all"> 
  
            <h3 class="ui-widget-header  
                ui-corner-all" style= 
                    "margin: 0; padding: 0.4em;  
                    height: 170px; text-align: center; 
                    background-color: green;"> 
                Beginner For Beginner 
            </h3> 
        </div> 
    </div> 
  
    <span style="margin-left: 6em;"> 
          <button id="button" class= 
            "ui-state-default ui-corner-all"
                  style="margin-top: 18em;"> 
            Action</button> 
      </span> 
</body> 
  
</html> 

Output:

HTML

Contact Us