Skip to content
Related Articles

Related Articles

How to click a button to animate the paragraph element using jQuery ?
  • Last Updated : 31 Dec, 2020

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>
        How to click a button to animate
        the paragraph element using jQuery?
    </title>
  
    <!-- Import jQuery cdn library -->
    <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>

chevron_right


Output:

Before Click Button:



After Click Button:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :