JQuery help - animate background color

Question

Using JQuery, what I want to do is create a function that when I call the function, it will fade the background color of my "#page" DIV from the CSS defined background color to yellow then back to the original CSS background color for #page.

Any ideas on how I can do this with JQuery?

I know JQuery has both an "animate" and "highlight" functionality. It appears "highlight" might be the appropriate option but I'm not certain.

Thanks

score 17 · Answer 1 · answered Aug 17 '09 at 01:52

17

Its pretty heavy to load the jquery UI just for this one feature, but if you are using it anyways, the effect you want is 'highlight'

http://docs.jquery.com/UI/Effects/Highlight

$("div").click(function () {
      $(this).effect("highlight", {}, 3000);
});

answered Aug 17 '09 at 01:52

micmcg

2,372
18
16

@micmcg, how can I call the "highlight" method programmaticly - where as in your example, it's call on a mouse click. – Aug 17 '09 at 02:33
just use the code inside the event handler. $("#page").effect("highlight", {}, 3000); – micmcg Aug 19 '09 at 07:09
3

And if you call this and absolutely nothing happens, make sure you actually have this effect included in your custom JQuery UI download. Because failing silently is the trendy way of failing. – Roman Starkov Sep 09 '11 at 00:40
Excellent, and to change the bgcolor simply put something like `{color:'rgba(255,255,255,.3)'}` inside the brackets. – andreszs Feb 28 '15 at 02:52

score 7 · Answer 2 · edited Sep 20 '12 at 18:25

7

function flashColor(id)
{
    var container = $('#'+id);
    if(container.length)
    {
        var originalColor = container.css('backgroundColor');
        container.animate({
            backgroundColor:'yellow'
        },'normal','linear',function(){
            $(this).animate({
                backgroundColor:originalColor
            });
        });
    }
}

edited Sep 20 '12 at 18:25

ContextSwitch

2,830
6
35
51

answered Aug 16 '09 at 23:35

Funky Dude

3,867
2
23
33

@Funky Dude, this looks promising. What minimum component do I need to download to have 'animate' capabilities? It's appears the base install of JQuery I have installed doesn't include 'animate' – Aug 17 '09 at 00:28
By the way, http://docs.jquery.com/Release:jQuery_1.2/Effects#Color_Animations is exactly what I want to do but make it a callable function – Aug 17 '09 at 00:32
jQuery's current docs (at http://api.jquery.com/animate/) say that you need jQueryUI if you want to animate colors. – Marius Gedminas Sep 02 '10 at 17:46

score 6 · Answer 3 · answered Apr 19 '11 at 14:32

You only need the jQuery color plugin if you want to use named colors (e.g. 'yellow' instead of '#FFFF9C'). I've had varying success with animate, but found that using its built in callback plus jQuery's css seems to work for most cases.

Try adding this function:

$(document).ready(function () {

    $.fn.animateHighlight = function (highlightColor, duration) {
        var highlightBg = highlightColor || "#FFFF9C";
        var animateMs = duration || 1000;
        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 calling it like so:

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

Tested in IE9, FF4, and Chrome, using jQuery 1.5 (do NOT need UI plugin for this).

score 2 · Answer 4 · answered Aug 16 '09 at 22:51

2

You could use the built-in jQuery function animate() with a callback to turn the div back to the original color. Or use the jQuery pulse plugin to do it automatically.

Hope that helps!

answered Aug 16 '09 at 22:51

Al.

2,872
2
22
34

score 1 · Answer 5 · edited May 23 '17 at 12:19

1

You need the color plugin to animate between colors.

See a previous SO q & a

edited May 23 '17 at 12:19

Community

1
1

answered Aug 16 '09 at 22:58

redsquare

78,161
20
151
159

score 1 · Answer 6 · answered Aug 16 '09 at 23:03

1

You may want to check out plugins such as this one to achieve what some call a "flash".

Unfortunately, searching for the term "jquery flash plugin" yields hundreds of results for SWF player plugins.

answered Aug 16 '09 at 23:03

Soviut

88,194
49
192
260

score 1 · Answer 7 · answered Jul 09 '13 at 11:52

test with all browsers

$(document).ready(function () {
    var id = $("div#1"); // div id=1
    var color = "lightblue"; // color to highlight
    var delayms = "800"; // mseconds to stay color
    $(id).css("backgroundColor",color)
    .css("transition","all 1.5s ease") // you may also (-moz-*, -o-*, -ms-*) e.g
    .css("backgroundColor",color).delay(delayms).queue(function() {
        $(id).css("backgroundColor",""); 
        $(id).dequeue();
    }); 
});

score 0 · Answer 8 · edited May 23 '17 at 12:16

0

Only this helped me. Source: questions/5205445

$("div").click(function() 
{
  // do fading 3 times
  for(i=0;i<3;i++) 
  {
    $(this).fadeTo('slow', 0.5).fadeTo('slow', 1.0);
  }
});

edited May 23 '17 at 12:16

Community

1
1

answered Apr 15 '14 at 12:46

Roman Losev

1,911
19
26

JQuery help - animate background color

8 Answers8