Animate background color in jQuery

Animate background color in jQuery: There are many ways to animate the background color. You can also use css to animate the background color. Here in this tutorial we are going to explain how you can animate the background color using jQuery. We will create demo to explain the background color animation in jQuery.

Animate background color in jQuery

Steps to animate background color in jQUery –

Include jQuery Color Library :

You can include it in two ways –

• 1 . Download from: https://code.jquery.com/color/
• 2 . Use CDN Version from :

  <script   src="https://code.jquery.com/color/jquery.color-2.1.2.min.js"   integrity="sha256-H28SdxWrZ387Ldn0qogCzFiUDDxfPiNIyJX7BECQkDE="   crossorigin="anonymous"></script>

Now you can use the color animation as below –

<script type="text/javascript">
function animateBg(){
    $("body").animate({backgroundColor:"olive"}, "slow");
    $("body").animate({backgroundColor:"yellow"}, "slow");
}
</script>

If you run the above example it will first change the body background color to the olive color and then it will change to the yellow background with slow speed. The above example will produce the output something like this –

Add Comment

📖 Read More

• 1. Change Button text in jQuery
• 2. Check Radio Button Using jQuery
• 3. jQuery Detect Click Outside of Element
• 4. jQuery check element visible Hidden