jQuery UI | effect() Method

jQuery UI framework provides effect() method for managing different variety of visual effects on the selected elements without using show() and hide() methods. There are many types of effects which are passed as a parameter to the effect() method.

Syntax:

$(selector).effect(effectType[, options ] [, duration ] [, complete ]);

Parameters: This method accepts four parameters as mentioned above and described below:

  • effectType: The type of effect which is chosen for the visual transition of the selected element.
  • options: The options or settings are used for easing effects.
  • duration: The time or duration in milliseonds used for the animation effect to run. The default value is 400ms.
  • complete: This is the callback function which is executed when the visual effect is completed.

Links for jQuery UI:

<link
href=”https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css”rel=”stylesheet”type=”text/css”/>
<script src=”https://code.jquery.com/jquery-1.10.2.js”></script>
<script src=”https://code.jquery.com/ui/1.10.4/jquery-ui.js”></script>



There are many variety of effectType which can be passed to the effect() method as per the project requirements. In the following example, we will be only demonstrating some of them along with output images.

Example 1: The following example demonstrates jQuery UI effect() method with shake effect with options settings as time and distance.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1">
  
    <title>jQuery UI effect method</title>
  
    <link href=
        rel="stylesheet">
  
    <script src=
    </script>
  
    <script src=
    </script>
  
    <style>
        #divID {
            width: 200px;
            height: 150px;
            text-align: center;
            background: green;
            border: 1px solid black;
        }
  
        .height {
            height: 10px;
        }
    </style>
  
    <script>
        $(document).ready(function () {
            $('#divID').click(function () {
                $("#divID").effect("shake", {
                    times: 20,
                    distance: 180
                }, 3000, function () {
                    $("#divID").css(
                        "background", "#ff0000");
                });
            });
        });  
    </script>
</head>
  
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
  
    <b>jQuery UI effect method with shake option </b>
      
    <div class="height"> </div>
      
    <div id="divID">
        <span>
            Click this to see the Shake effect!
        </span>
    </div>
</body>
  
</html>

chevron_right


Output:

Example 2: The following code demonstrates jQuery UI effect() method with explode effect with easing setting as “swing”.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
            "width=device-width, initial-scale=1">
  
    <title>jQuery UI effect with explode </title>
  
    <link href=
        rel="stylesheet">
  
    <script src=
    </script>
  
    <script src=
    </script>
  
    <style>
        #divID {
            height: 200px;
            width: 200px;
            text-align: center;
            background: green;
            border: 1px solid black;
        }
  
        .height {
            height: 10px;
        }
    </style>
  
    <script>
        $(document).ready(function () {
            $('#divID').click(function () {
                $("#divID").effect({
                    effect: "explode",
                    easing: "swing",
                    pieces: 12,
                    duration: 3000
                });
            });
        });  
    </script>
</head>
  
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
  
    <b>jQuery UI effect method with explode option</b>
      
    <div class="height"></div>
      
    <div id="divID">
        <span>
            Click this to see the explode effect!
        </span>
    </div>
</body>
  
</html>

chevron_right


Output:

Example 3: The following example demonstrates the effect() method with bounce effect type.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1">
          
    <title>jQuery UI effect Method with bounce</title>
  
    <link href=
        rel="stylesheet">
  
    <script src=
    </script>
  
    <script src=
    </script>
  
    <style>
        #divID {
            height: 100px;
            width: 200px;
            background: green;
            text-align: center;
            border: 1px solid black;
        }
  
        .height {
            height: 10px;
        }
    </style>
    <script>
        $(document).ready(function () {
            $('#divID').click(function () {
                $("#divID").effect("bounce", {
                    times: 20,
                    distance: 200
                }, 3000, function () {
                    $(this).css("background", "#ff0000");
                });
            });
        });  
    </script>
</head>
  
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <b>jQuery UI effect method with bounce </b>
    <div class="height"> </div>
    <div id="divID">
        <span>
            Click this to see bounce effect
        </span>
    </div>
</body>
  
</html>  

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.