Jquery UI Effect Tutorial | Jquery Effect Example

Jqury UI

Nicesnippets

609

13-06-2020


Jquery UI Effect Tutorial | Jquery Effect Example

Hi Guys,

In this Example,I 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 - Nicesnippets.com</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>

It will help you...


Recommended Posts