Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App

Related Articles

jQuery UI Highlight Effect

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

In this article, we are going to show the effect of highlight using jQueryUI, all the content will highlight with a small blink light when the action button is clicked which actually triggers the highlight effect script.

Syntax :

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


  •  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=”//”>

<script src=””></script>

<script src=””></script>

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


<!doctype html>
<html lang="en">
        <meta charset="utf-8">
        <meta name="viewport" 
              content="width=device-width, initial-scale=1">
        <link rel="stylesheet" 
            $( function() {
                function action(selectedEffect) {
                    $( "#effect" ).effect( selectedEffect, 1200);
                $( "#button" ).on( "click", function() {
                    return false;
            } );
             width: 500px;
             height: 500px;
             position: absolute; }
              padding: .5em 1em; 
              text-decoration: none; 
              position: absolute;
              width: 250px; 
              height: 190px;
              padding: 15px; 
              position: relative;
        <h3>Geeks for Geeks Highlight 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>
        <span style="margin-left: 6em;">
          <button id="button" class="ui-state-default ui-corner-all"
                  style="margin-top: 18em;">Action</button>

Output :

My Personal Notes arrow_drop_up
Last Updated : 25 Jan, 2021
Like Article
Save Article
Similar Reads