Open In App

jQuery UI Pulsate Effect

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we are going to show the effect of pulsate using jQuery UI, all the content will blink like a pulse and stop when the action button is clicked which actually triggers the pulse 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 will not return anything.

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 pulsate 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("pulsate");
                    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 Pulsate 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 :



Last Updated : 25 Jan, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads