Skip to content
Related Articles

Related Articles

jQuery UI Slide Effect
  • Last Updated : 25 Jan, 2021

In this article, we are going to show the effect of the slide using jQuery UI, all the content will come in from the left when the action button is clicked which actually triggers the slide effect script.

Syntax :

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

Parameters:

  • selectedEffect: Select any effect given in jQuery UI.
  • options: Added for certain functionality (optional)
  • time: Time to complete the effect in microseconds.
  • callback: Added for certain functionality (optional).

Return  value: It will not return you anything.

Scripts added : Please download the library or use the paths for the given scripts 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 slide effect using jQuery UI. 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">
        <title>Geeks For Geeks</title>
        <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("slide");
                    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>Geeks for Geeks Slide 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;">
                  Geeks For Geeks
                 </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 :

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :