Inactive jQuery background color

Question

I want to change the background color of "exampleDiv" to the original white background when I call the code below to immediately change the yellow background and then return to the original white background.

$("#exampleDiv").animate({ backgroundColor: "yellow" }, "fast"); 

However, this code does not work.

I have only the jQuery core and the jQuery user interface associated with my webpage.

Why does the code above not work?

Answer 1

I had variable success with animate , but found that using its built-in callback plus jQuery css seems to work in most cases.

Try this feature:

 $(document).ready(function () { $.fn.animateHighlight = function (highlightColor, duration) { var highlightBg = highlightColor || "#FFFF9C"; var animateMs = duration || "fast"; // edit is here var originalBg = this.css("background-color"); if (!originalBg || originalBg == highlightBg) originalBg = "#FFFFFF"; // default to white jQuery(this) .css("backgroundColor", highlightBg) .animate({ backgroundColor: originalBg }, animateMs, null, function () { jQuery(this).css("backgroundColor", originalBg); }); }; }); 

and name it like this:

 $('#exampleDiv').animateHighlight(); 

Tested in IE9, FF4 and Chrome using jQuery 1.5 (this does not require a UI plugin). I also did not use the jQuery color plugin - you only need this if you want to use named colors (for example, 'yellow' instead of '#FFFF9C' ).

Answer 2

I believe you also need jQuery Color Animations .

Answer 3

I had the same problem and I was able to get everything to work when I included the correct js files.

 <script src="/Scripts/jquery-1.9.1.js"></script> <script src="/Scripts/jquery-ui-1.8.20.js"></script> <script src="/Scripts/jquery.color-2.1.2.js"></script> 

I took another step and found a good extension that someone wrote.

 jQuery.fn.flash = function (color, duration) { var current = this.css('backgroundColor'); this.animate({ backgroundColor: 'rgb(' + color + ')' }, duration / 2) .animate({ backgroundColor: current }, duration / 2); } 

The above code allows me to do the following:

 $('#someId').flash('255,148,148', 1100); 

This code will make your element blink red and then return to its original color.

Here is a sample code. http://jsbin.com/iqasaz/2

Answer 4

The jQuery user interface has a highlight effect that does exactly what you want.

  $("exampleDiv").effect("highlight", {}, 5000); 

You have some options, such as changing the highlight color.

Answer 5

BackgroundColor animation is not supported in jQuery 1.3.2 (or earlier). Only parameters that accept numerical values ​​are supported. See the documentation for the method. The color animation plugin adds the ability to do this with jQuery 1.2.

Answer 6

I ran into the same problem, and it ended up being a multiple call to the jquery js file on the page.

Although this works great with any other methods, as well as with animation, when trying to use other css properties, for example, on the left, but this does not work for the background color property in the animation method.

Therefore, I deleted the extra jquery jquery file call, and it worked absolutely fine for me.

Answer 7

For me, it worked great with effects.core.js . However, I do not remember whether this was really required. I think it only works with hexadecimal values. Here's a sample hover code that makes things disappear on hover. Thought it might be useful:

 jQuery.fn.fadeOnHover = function(fadeColor) { this.each(function() { jQuery(this).data("OrigBg",jQuery(this).css("background-color")); jQuery(this).hover( function() { //Fade to the new color jQuery(this).stop().animate({backgroundColor:fadeColor}, 1000) }, function() { //Fade back to original color original = jQuery(this).data("OrigBg"); jQuery(this).stop().animate({backgroundColor:original},1000) } ); }); } $(".nav a").fadeOnHover("#FFFF00"); 

Answer 8

I had to use the color.js file to get this to work. I am using jquery 1.4.2.

Get here color.js

Answer 9

This snippet was just added below the jquery script, and it immediately started working:

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

Source