Open In App
Related Articles

How to change the color of any div that is animated using jQuery ?

Improve Article
Save Article
Like Article

In this article, we will learn to change the color of any HTML div that is animated using jQuery.We will be using the jQuery .animate() method to change the background colors of any element. 

The jQuery .animate() method is used to create smooth animations by changing the CSS properties of elements over time. It allows you to specify the duration, easing, and target values, providing dynamic and visually appealing effects to elements on a web page.


(selector).animate({css styles},speed,easing,callback)

CSS styles define CSS properties, such as background color, padding, margin, etc. Speed specifies the speed of the animation which is by default  400 milliseconds. The option easing specifies the speed of the element in different points of the animation, for example, swing or linear. The callback is a function to be executed after the animation completes.

Example: The following example helps to change the color of any div that is animated.


<!DOCTYPE html>
    <script src=
    <script src=
        div {
            width: 300px;
            border: solid 1px black;
            border-radius: 5px;
            margin-left: 20px;
    <h2 style="color: green">GeeksforGeeks</h2>
        <input type="button" id="btn1" value="Animate" />
    <div id="div">Animate Colors</div>
        let animate = true;
        $("#btn1").click(function () {
            // Changing the background color alongwith
            // changing width of the div tag
            if (animate)
                    "background-color": "red",
                    width: "200px"
                }, 800);
                        "background-color": "green",
                        width: "300px"
            animate = !animate;


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 : 05 Jun, 2023
Like Article
Save Article
Similar Reads
Complete Tutorials