JQuery Animate () and BackgroundColor

Question

I am trying to create a simple pulsed effect by changing the background color using jQuery. However, I cannot get backgroundColor for the animation.

function show_user(dnid) { /* dnid is HTML ID of a div. */ if (! $(dnid).is(':visible')) { $(dnid).show() } $('html, body').animate({scrollTop: $(dnid).offset().top}); $(dnid).animate({backgroundColor: "#db1a35"}, 1200); } 

What is strange is that this alternative animation works:

 $(dnid).animate({opacity: "toggle"}, 1200); 

But that is not what I want at all.

In addition, the show () and scroll functions in the function work fine. This is just a color background animation that does not.

The above function is called from this link <a href="#" onclick="javascript:show_user('#9e4cde88b90004ea722e9e129ed83747')">Locate Me</a>

Can someone help me change the background color?

==========

Thank you all for your help. Many similar answers. Here is what I ended up with

In my title

<script src="http://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>

Then in my show_user function right after the scroll animation.

 var bgcol = $(dnid).css('backgroundColor'); $(dnid).animate({backgroundColor: "#db1a35"}, 2000); $(dnid).animate({backgroundColor: bgcol}, 2000); 

This gives a relatively quick red “boost” that would draw the user's eyes.

Thanks again for the help.

Answer 1

jQuery cannot change default colors. To bring colors to life, use the official jQuery.Color plugin.

All animated properties must be animated to a single numeric value, except as indicated below; most properties that are not numeric cannot be animated using the basic jQuery functions (for example, width, height or left can be animated, but the background color cannot be if the jQuery.Color () plugin is not used).

A source

Answer 2

jQuery supports animations between any CSS numeric properties that do not include colors. However, there are other libraries that make animated colors possible. One such library is aptly-named jQuery Color . The readme page shows some examples of using animations between colors using the jQuery .animate() function

Answer 3

Use CSS animation property and keyframes

Look at the action

HTML

 <div></div> 

CSS

 div { background-color: red; height: 200px; width: 200px; -webkit-animation: pulse 1s ease-in 0 infinite normal both; -moz-animation: pulse 1s ease-in 0 infinite normal both; -o-animation: pulse 1s ease-in 0 infinite normal both; animation: pulse 1s ease-in 0 infinite normal both; } @-webkit-keyframes pulse { 0% { background-color: red; } 65% { background-color: #7F0093; } 100% { background-color: blue; } } @-moz-keyframes pulse { 0% { background-color: red; } 65% { background-color: #7F0093; } 100% { background-color: blue; } } @-ms-keyframes pulse { 0% { background-color: red; } 65% { background-color: #7F0093; } 100% { background-color: blue; } } @-o-keyframes pulse { 0% { background-color: red; } 65% { background-color: #7F0093; } 100% { background-color: blue; } } @keyframes pulse { 0% { background-color: red; } 65% { background-color: #7F0093; } 100% { background-color: blue; } } 

Answer 4

you must first set the background to color from it or it will not do anything 2 times. You also sealed the css 'background-color' property and put it in quotation marks, like me:

 $(dnid).css({'background-color': "#ffffff"}); $(dnid).animate({'background-color': "#db1a35"}, 1200); 

Answer 5

Just add this below your jQuery script, and you're done:

 <script src="https://cdn.jsdelivr.net/jquery.color-animation/1/mainfile"></script>