In this article, we will learn to animate using jQuery addClass() and removeClass() functions.
We are going to use jQuery and jQuery UI. jQuery UI (User Interface) is free and open-source software that is built on top of the core powerful jQuery library. If you want to use jQuery UI, you must include jQuery too. jQuery UI provides more features like add Class, color animation and easing, etc.
We are going to use some jQuery UI addClass() and removeClass() methods.
-
addClass() method: It is used to add specified classes to each of the targeted elements while animating all style changes.
Syntax:
.addClass(className, [duration], [easing], [callback])
-
removeClass() method: It is used to remove the classes from the element while animating all style changes.
Syntax:
.removeClass(className, [duration], [easing], [callback])
Example: The following example demonstrates animation using the above classes. We are using setTimeout to remove the class after the animation.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
#btn {
padding: 10px 8px;
color: green;
background-color: rgba(122, 122, 122, 0.322);
border-radius: 12px;
}
.geeks {
font-size: 40px;
color: green;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
text-shadow: 2px 2px 4px #880a0a;
letter-spacing: 2px;
}
</style>
<script src=
integrity=
"sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<script src=
</script>
<script>
$(document).ready(function () {
$("#btn").click(function () {
$("h2").addClass("geeks", 2000, myCallback);
});
function myCallback() {
setTimeout(function () {
$("h2").removeClass("geeks");
}, 3000);
}
});
</script>
</head>
<body>
<h2>Welcome to GeeksForGeeks.</h2>
<button id="btn">
Click to see the effect</button>
</body>
</html>
|
Output:
animation effect
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!