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

Chekhov

Answer 1

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);
});

Odessa

@micmcg, how can I call the "highlight" method programmaticly - where as in your example, it's call on a mouse click. – Chekhov

just use the code inside the event handler. $("#page").effect("highlight", {}, 3000); – Odessa

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. – Humidor

Excellent, and to change the bgcolor simply put something like {color:'rgba(255,255,255,.3)'} inside the brackets. – Engraft

Answer 2

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
            });
        });
    }
}

Guatemala

@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' – Chekhov

By the way, docs.jquery.com/Release:jQuery_1.2/Effects#Color_Animations is exactly what I want to do but make it a callable function – Chekhov

jQuery's current docs (at api.jquery.com/animate) say that you need jQueryUI if you want to animate colors. – Snowwhite

Answer 3

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).

Cavorelievo

Answer 4

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!

Timmytimocracy

Answer 5

You need the color plugin to animate between colors.

See a previous SO q & a

Lir

Answer 6

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.

Asthenia

Answer 7

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();
    }); 
});

Bus

Answer 8

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);
  }
});

Donny