JQuery UI Effects Animation Tutorial | JQuery Effects Animation Example

Admin   Jquery   160  2021-03-13 16:20:04

Hi Dev,

In this blog,I will descuss with you animation effect to the elements 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 Animate Example</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;

}

#effect {

width: 240px;

height: 170px;

padding: 0.4em;

position: relative;

background: #fff;

}

#effect h3 {

margin: 0;

padding: 0.4em;

text-align: center;

}

.box-main{

margin:150px auto;

padding:20px;

width:38%;

border-radius: 5px;

border:2px solid #000;

}

</style>

</head>

<body>

<div class="box-main">

<div class="toggler">

<div id="effect" class="ui-widget-content ui-corner-all">

<h3 class="ui-widget-header ui-corner-all">Animate 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>

<button id="button" class="ui-state-default ui-corner-all">Click Me Toggle Effect</button>

</div>

<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>

<script>

$( function() {

var state = true;

$("#button" ).on( "click", function() {

if(state){

$( "#effect" ).animate({

backgroundColor: "#000",

color: "#fff",

width: 500

},1000);

}else{

$( "#effect" ).animate({

backgroundColor: "#fff",

color: "#000",

width: 240

},1000);

}

state = !state;

});

});

</script>

</body>

</html>

It will help you...