In this article, we will click a button to animate the paragraph element using jQuery. To animate the paragraph elements, we use animate() method. The animate() method is used to change the state of the element with CSS style. This method can also be used to change the CSS property to create the animated effect for the selected element.
Syntax:
$(selector).animate({styles}, para1, para2, para3);
Example:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>
How to click a button to animate
the paragraph element using jQuery?
</title>
<script src=
</script>
<script>
$(document).ready(function () {
$("button").click(function () {
$("#GFG").animate({
opacity: 0.5,
fontSize: "3em",
}, 1000);
});
});
</script>
</head>
<body style="text-align: center;">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
How to click a button to animate
the paragraph element using jQuery?
</h3>
<p id="GFG">
GeeksforGeeks computer science portal
</p>
<button>Click Here!</button>
</body>
</html>
|
Output:
Before Click Button:
After Click Button:
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!
Last Updated :
31 Dec, 2020
Like Article
Save Article