How SO revived div's answer
I've been wondering for some time now how SO did this animation on answers, when you click on the answer on the answer, the divs color changes for some time and it will go back, I'm sure this question has been asked before, but I just couldn't find it. Or this random example:
UPDATE
I see good answers, but not exactly what I'm looking for, or maybe I am a dream, like this:
I have a div with id #footer, so if I type http: //mysite.com#footer it scrolls me to the footer, how can I pass the argument which div to animate by just visiting url http: // mysite.com # footer
a source to share
Using the jQuery Color plugin is the easiest way to animate colors:
http://plugins.jquery.com/project/color
Once this plugin is enabled, you can animate any colors. For example, to set an element to yellow and then fade slowly (over 5 seconds, say):
$("#something").css("background-color", "yellow") // set the background to yellow
.animate({"background-color": "white"}, 5000); // fade to white
Of course, you can use hexadecimal colors instead of color names (eg, "# FFFF00" instead of yellow).
a source to share
Take a look at the source of the page. The top has this. I don't know much about jQuery, but it looks like a jQuery color animation for the response element.
$(function() {
var finalColor = '#FFF';
$('#answer-2706531').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);
}
}
);
It fades to white ( '#FFF'
) within 2000 milliseconds.
a source to share