JQuery UI removeClass Effects Animation Tutorial

Jqury UI

Nicesnippets

65

16-06-2020


Hi Guys,

In this blog, I would like share with you how to remove specify class using jquery ui. Removes the specified class from each of the set of matched elements while animating all style changes.

One or more class names (space separated) to be removed from the class attribute of each matched element.

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

position: relative;

width: 240px; padding: 1em;

letter-spacing: 0;

font-size: 1.2em;

border: 1px solid #000;

background: #eee; color: #333;

}

.newClass {

text-indent: 40px;

letter-spacing: .4em;

width: 410px;

height: 100px;

padding: 30px;

margin: 10px;

font-size: 1.6em;

}

.main-section{

margin:25px auto;

padding:30px 60px;

width:22.3%;

border:2px solid #000;

}

</style>

</head>

<body style="background-color:#9c601680;">

<h2 style="text-align: center;">JQuery Ui removeClass Example - NiceSnippets.com</h2>

<div class="main-section">

<div class="toggler">

<div id="effect" class="newClass 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").removeClass("newClass", 1000, callback);

});

function callback() {

setTimeout(function() {

$("#effect").addClass("newClass");

}, 1500);

}

});

</script>

</body>

</html>

It will help you...


Recommended Posts