Skip to content
geeksforgeeks
  • Courses
    • DSA to Development
    • Get IBM Certification
    • Newly Launched!
      • Master Django Framework
      • Become AWS Certified
    • For Working Professionals
      • Interview 101: DSA & System Design
      • Data Science Training Program
      • JAVA Backend Development (Live)
      • DevOps Engineering (LIVE)
      • Data Structures & Algorithms in Python
    • For Students
      • Placement Preparation Course
      • Data Science (Live)
      • Data Structure & Algorithm-Self Paced (C++/JAVA)
      • Master Competitive Programming (Live)
      • Full Stack Development with React & Node JS (Live)
    • Full Stack Development
    • Data Science Program
    • All Courses
  • Tutorials
    • Data Structures & Algorithms
    • ML & Data Science
    • Interview Corner
    • Programming Languages
    • Web Development
    • CS Subjects
    • DevOps And Linux
    • School Learning
  • Practice
    • Build your AI Agent
    • GfG 160
    • Problem of the Day
    • Practice Coding Problems
    • GfG SDE Sheet
  • Contests
    • Accenture Hackathon (Ending Soon!)
    • GfG Weekly [Rated Contest]
    • Job-A-Thon Hiring Challenge
    • All Contests and Events
  • jQuery Tutorial
  • jQuery Selectors
  • jQuery Events
  • jQuery Effects
  • jQuery Traversing
  • jQuery HTML & CSS
  • jQuery AJAX
  • jQuery Properties
  • jQuery Examples
  • jQuery Interview Questions
  • jQuery Plugins
  • jQuery Cheat Sheet
  • jQuery UI
  • jQuery Mobile
  • jQWidgets
  • Easy UI
  • Web Technology
Open In App
Next Article:
How to add a class to the last paragraph element using jQuery ?
Next article icon

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:

Next Article
How to add a class to the last paragraph element using jQuery ?

V
vkash8574
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 scroll automatically to a particular element using JQuery?
    The task is to scroll to a particular element automatically. Below are the approaches: Approach 1: Get the height of the element by .position().top property. Use .scrollTop() method to set the vertical position of the scrollbar equal to the calculated height of the particular element. Example 1: Thi
    2 min read
  • How to add `style=display:“block”` to an element using jQuery?
    To add the inline style style="display: block" to HTML elements using jQuery, there are several approaches, each with its advantages. Below are the different methods you can use: Table of Content Using the CSS() methodUsing the show() methodUsing the attr() methodUsing the prop() methodUsing the CSS
    3 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 : C/C++ Code <!DOCTYPE html> <html> <head
    1 min read
geeksforgeeks-footer-logo
Corporate & Communications Address:
A-143, 7th Floor, Sovereign Corporate Tower, Sector- 136, Noida, Uttar Pradesh (201305)
Registered Address:
K 061, Tower K, Gulshan Vivante Apartment, Sector 137, Noida, Gautam Buddh Nagar, Uttar Pradesh, 201305
GFG App on Play Store GFG App on App Store
Advertise with us
  • Company
  • About Us
  • Legal
  • Privacy Policy
  • In Media
  • Contact Us
  • Advertise with us
  • GFG Corporate Solution
  • Placement Training Program
  • Languages
  • Python
  • Java
  • C++
  • PHP
  • GoLang
  • SQL
  • R Language
  • Android Tutorial
  • Tutorials Archive
  • DSA
  • Data Structures
  • Algorithms
  • DSA for Beginners
  • Basic DSA Problems
  • DSA Roadmap
  • Top 100 DSA Interview Problems
  • DSA Roadmap by Sandeep Jain
  • All Cheat Sheets
  • Data Science & ML
  • Data Science With Python
  • Data Science For Beginner
  • Machine Learning
  • ML Maths
  • Data Visualisation
  • Pandas
  • NumPy
  • NLP
  • Deep Learning
  • Web Technologies
  • HTML
  • CSS
  • JavaScript
  • TypeScript
  • ReactJS
  • NextJS
  • Bootstrap
  • Web Design
  • Python Tutorial
  • Python Programming Examples
  • Python Projects
  • Python Tkinter
  • Python Web Scraping
  • OpenCV Tutorial
  • Python Interview Question
  • Django
  • Computer Science
  • Operating Systems
  • Computer Network
  • Database Management System
  • Software Engineering
  • Digital Logic Design
  • Engineering Maths
  • Software Development
  • Software Testing
  • DevOps
  • Git
  • Linux
  • AWS
  • Docker
  • Kubernetes
  • Azure
  • GCP
  • DevOps Roadmap
  • System Design
  • High Level Design
  • Low Level Design
  • UML Diagrams
  • Interview Guide
  • Design Patterns
  • OOAD
  • System Design Bootcamp
  • Interview Questions
  • Inteview Preparation
  • Competitive Programming
  • Top DS or Algo for CP
  • Company-Wise Recruitment Process
  • Company-Wise Preparation
  • Aptitude Preparation
  • Puzzles
  • School Subjects
  • Mathematics
  • Physics
  • Chemistry
  • Biology
  • Social Science
  • English Grammar
  • Commerce
  • World GK
  • GeeksforGeeks Videos
  • DSA
  • Python
  • Java
  • C++
  • Web Development
  • Data Science
  • CS Subjects
@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox
Improvement
Suggest Changes
Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal.
geeksforgeeks-suggest-icon
Create Improvement
Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all.
geeksforgeeks-improvement-icon
Suggest Changes
min 4 words, max Words Limit:1000

Thank You!

Your suggestions are valuable to us.

What kind of Experience do you want to share?

Interview Experiences
Admission Experiences
Career Journeys
Work Experiences
Campus Experiences
Competitive Exam Experiences