Skip to content

All topics  /  jQuery

JQuery UI Effect Example | JQuery UI Effect Tutorial

jQuery ·

When “JQuery UI Effect Example | JQuery UI Effect Tutorial” moves through design, development and browser testing, workplace investigation can clarify hand-offs and time spent on revisions while leaving code quality, accessibility and released behaviour as the real measures of success.

For API changes, browser support and current usage patterns, compare the snippet with the official jQuery website before adopting it in production.

Hi Guys,

In this blog, I will show you all animation effect using jquery ui.It is easy and simply to perform all animation effect in jquery ui.

The effect() method is used to apply an animation effect to the element without having to show or hide it. It is one of the method which is used to manage jQuery UI visual effects.

Example


<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Effects - Effect Wxample</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <style>
        .toggler { width: 500px; height: 200px; position: relative; }
        #button { padding: .5em 1em; text-decoration: none; width: 100%;}
        #effect { width: 390px; height: 170px; padding: 0.4em; position: relative; }
        #effect h3 { margin: 0; padding: 0.4em; text-align: center;}
        .ui-effects-transfer { border: 2px dotted gray; }
        .main-section{
            margin:0px auto;
            width:30%;
            padding:50px;
            border-radius: 5px;
            border:2px solid #000;
        }
        select{
            padding:10px;
            width: 100%;
            margin-bottom:20px;
        }
    </style>
    <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>
</head>
<body>
    <h2 style="text-align: center;>JQuery UI Effect Example -NiceSnippets.com </h2>
    <div class="main-section">
        <div class="toggler">
            <div id="effect" class="ui-widget-content ui-corner-all">
                <h3 class="ui-widget-header ui-corner-all">Effect Box</h3>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua.
                </p>
            </div>
        </div>
        <select name="effects" id="effectTypes">
            <option value="blind">Blind</option>
            <option value="bounce">Bounce</option>
            <option value="clip">Clip</option>
            <option value="drop">Drop</option>
            <option value="explode">Explode</option>
            <option value="fade">Fade</option>
            <option value="fold">Fold</option>
            <option value="highlight">Highlight</option>
            <option value="puff">Puff</option>
            <option value="pulsate">Pulsate</option>
            <option value="scale">Scale</option>
            <option value="shake">Shake</option>
            <option value="size">Size</option>
            <option value="slide">Slide</option>
            <option value="transfer">Transfer</option>
        </select>
        <button id="button" class="ui-state-default ui-corner-all">Click Me Run Effect</button>
    </div>
    <script>
        $( function() {
            // run the currently selected effect
            function runEffect() {
            // get effect type from
            var selectedEffect = $( "#effectTypes" ).val();

     
            // Most effect types need no options passed by default
            var options = {};
            // some effects have required parameters
            if ( selectedEffect === "scale" ) {
                options = { percent: 50 };
            } else if ( selectedEffect === "transfer" ) {
                options = { to: "#button", className: "ui-effects-transfer" };
            } else if ( selectedEffect === "size" ) {
                options = { to: { width: 200, height: 60 } };
            }

     
            // Run the effect
            $( "#effect" ).effect( selectedEffect, options, 500, callback );
        };

     
        // Callback function to bring a hidden box back
        function callback() {
            setTimeout(function() {
                $( "#effect" ).removeAttr( "style" ).hide().fadeIn();
            }, 1000 );
        };

     
        // Set effect from select menu value
        $( "#button" ).on( "click", function() {
            runEffect();
            return false;
        });
    });
  </script> 
</body>
</html>

It will help you...

More on this topic