Flash a container's background orange (like SO does when you navigate directly to an answer)

Question

I want #container's background to flash orange and then return to its normal color.

Is there any better way to accomplish this than:

var old_bg_color = $('#container').css('background-color');
$('#container').css('background-color', 'orange')
  .animate({backgroundColor: old_bg_color}, 3000);

Answer 1

Check the page source how SO does it. When linking an answer, the answer ID will show up as last pathinfo part of the URL, e.g. http://stackoverflow.com/questions/2338860/flash-a-containers-background-orange-like-so-does-when-you-navigate-directly-to/2339009#2339009 <-- here.

In the page source you'll find that the answer has already a server-side generated background color. It thus intercepts on the last pathinfo part of the URL (easy task in any decent server-side language):

<div id="answer-2339009" class="answer" style="background-color:#F4A83D;">

This gets faded out with this function in the "plain vanilla" <script type="text/javascript"> tag right before the </head>:

    var finalColor = '#FFF';
    $('#answer-2339009').animate({ backgroundColor:finalColor }, 2000, 
        'linear', function() {
            // shove the hex color into an element to easily compare rbg() numbers
            var test = $('<span></span>').css('background-color', finalColor);
            if ($(this).css('background-color') != test.css('background-color')) {
                $(this).css('background-color', finalColor);
            }
        }
    );

The callback function is not mandatory for this function by the way.