JQuery UI Effects Animation Tutorial | JQuery Effects Animation Example

Admin   Jquery   334  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.



<!doctype html>

<html lang="en">


<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" target="_blank" rel="nofollow" >


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



margin:150px auto;



border-radius: 5px;

border:2px solid #000;





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



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


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


$( function() {

var state = true;

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


$( "#effect" ).animate({

backgroundColor: "#000",

color: "#fff",

width: 500



$( "#effect" ).animate({

backgroundColor: "#fff",

color: "#000",

width: 240



state = !state;






It will help you...