In this tutorial,  we will learn JQuery UI Widget Effects Animation Example


Example

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Widget Example</title>
    <link rel="stylesheet" href="https://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>

    <style>
        .custom-colorize {
            color:#fff;
            font-size: 20px;
            position: relative;
            width: 75px;
            height: 75px;
            float:left;
            margin-left:5px;
            padding:20px;
            text-align: center;
        }
        .custom-colorize-changer {
            font-size: 10px;
            position: absolute;
            right: 0;
            bottom: 0;
            margin:5px;
            font-size:12px;
        }
        #green{
            border:unset;
            color:#fff;
            background: #000;
            padding:6px 8px;
        }
        #disable{
            background: #000;
            color:#fff;
            border:unset;
            padding:6px 8px;
            margin-left:-300px;
            margin-top:150px;
        }
    </style>
</head>
<body>
    <div>
        <div id="my-widget1">color me</div>
        <div id="my-widget2">color me</div>
        <div id="my-widget3">color me</div>
        <button id="disable">Toggle disabled option</button>
        <button id="green">Go green</button>
    </div>

    <script type="text/javascript">
        $( function() {
            $.widget( "custom.colorize", {
                options: {
                red: 255,
                green: 0,
                blue: 0,
                change: null,
                random: null
            },
     
            // The constructor
            _create: function() {
            this.element
              // add a class for theming
              .addClass( "custom-colorize" );
     
            this.changer = $( "<button>", {
                text: "change",
                "class": "custom-colorize-changer"
            })
            .appendTo( this.element )
            .button();
     
            // Bind click events on the changer button to the random method
            this._on( this.changer, {
                // _on won't call random when widget is disabled
                click: "random"
            });
            this._refresh();
          },
     
          // Called when created, and later when changing options
          _refresh: function() {
                this.element.css( "background-color", "rgb(" +
                this.options.red +"," +
                this.options.green + "," +
                this.options.blue + ")"
            );
     
            // Trigger a callback/event
            this._trigger( "change" );
          },
     
            // A public method to change the color to a random value
            // can be called directly via .colorize( "random" )
            random: function( event ) {
            var colors = {
                red: Math.floor( Math.random() * 256 ),
                green: Math.floor( Math.random() * 256 ),
                blue: Math.floor( Math.random() * 256 )
            };
     
            // Trigger an event, check if it's canceled
            if ( this._trigger( "random", event, colors ) !== false ) {
                this.option( colors );
            }
        },
     
          // Events bound via _on are removed automatically
          // revert other modifications here
          _destroy: function() {
            // remove generated elements
            this.changer.remove();
     
            this.element
                .removeClass( "custom-colorize" )
                .enableSelection()
                .css( "background-color", "transparent" );
            },
     
          // _setOptions is called with a hash of all options that are changing
          // always refresh when changing options
          _setOptions: function() {
            // _super and _superApply handle keeping the right this-context
            this._superApply( arguments );
            this._refresh();
        },
     
          // _setOption is called for each individual option that is changing
          _setOption: function( key, value ) {
            // prevent invalid color values
            if ( /red|green|blue/.test(key) && (value < 0 || value > 255) ) {
                return;
            }
                this._super( key, value );
            }
        });
     
        // Initialize with default options
        $( "#my-widget1" ).colorize();
     
        // Initialize with two customized options
        $( "#my-widget2" ).colorize({
            red: 60,
            blue: 60
        });
     
        // Initialize with custom green value
        // and a random callback to allow only colors with enough green
        $( "#my-widget3" ).colorize( {
          green: 128,
          random: function( event, ui ) {
            return ui.green > 128;
          }
        });
     
        // Click to toggle enabled/disabled
        $( "#disable" ).on( "click", function() {
          // use the custom selector created for each widget to find all instances
          // all instances are toggled together, so we can check the state from the first
            if ( $( ":custom-colorize" ).colorize( "option", "disabled" ) ) {
                $( ":custom-colorize" ).colorize( "enable" );
            } else {
                $( ":custom-colorize" ).colorize( "disable" );
            }
        });
     
        // Click to set options after initialization
        $( "#green" ).on( "click", function() {
            $( ":custom-colorize" ).colorize( "option", {
                    red: 64,
                    green: 250,
                    blue: 8
                });
            });
        });
    </script>
</body>
</html>


May this example help you