How to click a button to animate the paragraph element using jQuery ? Last Updated : 31 Dec, 2020 Comments Improve Suggest changes Like Article Like Report 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> <!-- Import jQuery cdn library --> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </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: Comment More infoAdvertise with us Next Article How to click a button to animate the paragraph element using jQuery ? V vkash8574 Follow Improve Article Tags : Web Technologies JQuery jQuery-Questions Similar Reads How to add a class to the last paragraph element using jQuery ? In this article, we will learn to add a class to the last paragraph element using jQuery. To add a class to the last paragraph element, we use last() and addClass() methods. The jQuery last() function is an inbuilt function that is used to find the last element of the specified elements. Syntax: $(s 1 min read How to find all paragraph elements using jQuery ? Given a webpage containing paragraph elements and the task is to find every paragraph element using the jQuery module. We have to find the <p> elements from the HTML page, and you can achieve this task by using the element selectors. The element selector will select the element based on the el 2 min read How to insert a DOM element after all paragraphs using jQuery ? In this article, we will insert a DOM element after all paragraph elements using jQuery. To insert a DOM element we use after() and createTextNode() methods. The createTextNode() method is used to create a TextNode which contains an element node and a text node. It is used to provide text to an elem 1 min read How to click on a paragraph and add another paragraph using jQuery ? In this article, we will learn how to add another paragraph to the document when a paragraph is clicked using jQuery. Approach: We will be using the delegate() and after() methods of jQuery. The delegate() method is used to add event listeners to the given element. This will be used to add a click e 2 min read How to append some text to all paragraphs using jQuery ? In this article, we will append some text to all paragraph elements using jQuery. To append some text to all paragraph elements, we use append() and document.createTextNode() methods. jQuery append() method is used to insert some content at the end of the selected elements. Syntax: $(selector).appen 1 min read Like