In this example, we will learn Jquery UI Effect Tutorial | Jquery Effect Example



In this example, we would like share with you how to create effects in jquery UI. you can simply create in jquery UI.


effect() method applies an animation effect to the elements without having to show or hide it.


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 - AddClass</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>
        .toggler {
            width: 500px;
            height: 200px;
            position: relative;
        }
        #button {
            padding: .5em 1em;
            text-decoration: none;
            background:green;color:#fff;
            padding:10px 20px;
            font-size:16px;}
        #effect { 
            width: 240px;
            padding: 1em;
            border: 1px solid #008B8B;
            background: #008B8B;
            color: #fff; }
        .newClass {
            text-indent: 40px;
            letter-spacing: .4em;
            width: 410px; height: 120px;
            padding: 30px; margin: 10px;
            font-size: 1.1em; }
        .main-div{
            padding:20px;
            text-align: center;
            width:30%;
            border-radius: 5px;
            border:2px solid green;
            margin:0 auto;
        }
        h1{
        	text-align: center;
        }
        body{
        	background-color: #f4f07a;
        }
    </style>
</head>
<body>
    <h1>Jquery Effect Example - rathoji.in</h1>
    <div class="main-div">
        <div class="toggler">
            <div id="effect" class="ui-corner-all">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            </div>
        </div>
        <button id="button" class="ui-state-default ui-corner-all">Click Me Run Effect</button>
    </div>

    <script>
        $(function(){
                $("#button").on("click",function(){
                $("#effect").addClass("newClass",1000,callback);
            });
            function callback() {
                setTimeout(function() {
                    $("#effect").removeClass( "newClass" );
                }, 1500);
            }
        });
    </script>
</body>
</html>


May this example help you.