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 How to find all textarea and paragraphs to make a border using jQuery ? Given a set of textareas, the task is to apply a border on each of them and subsequently add some paragraphs and then define a border on every paragraph using the jQuery library. Approach 1: Using the click(), css() and add() methods in jQuery: There are two textareas, two paragraphs, and one button 3 min read How to change the color of any paragraph to red on mouseover event using jQuery ? In this article, we will learn how to change the color of any paragraph to red on a mouseover event. Approach: This can be achieved by using the on() method of jQuery to attach an event handler function on a mouseover event. This event fires when the user hovers the cursor on any paragraph. The hand 1 min read How to remove all paragraphs from the DOM using jQuery ? To remove elements and content, we use jQuery remove() method which removes the selected element as well as everything inside it, also it will remove all bound events associated with that target element. Syntax: $(selector).remove() Example : HTML <!DOCTYPE html> <html> <head> < 1 min read How to scroll the page up or down using anchor element in jQuery ? The problem is to include a slide effect whenever we click a local anchor and we want to scroll up or down the page accordingly. Earlier we can do it natively by using CSS property. Syntax: a { scroll-behavior: smooth; } Now with the help of jQuery, we can do it by using the following two methods: j 2 min read How to perform click-and-hold operation inside an element using jQuery ? Given an HTML element and the task is to click and hold an element in a document for a few seconds to perform the operation using jQuery. Approach: Select an HTML element. Add the event listener to that element and add a timeOut timer for that event. If that event happens to active for few seconds t 3 min read Like