jquery / css3 highlight animation
HTML
<div id="status">Default message</div>
<button id="do-something">Do something</button>
CSS
#status {
padding: 5px;
text-align: center;
-webkit-transition: background-color 2ms linear;
-moz-transition: background-color 2ms linear;
-o-transition: background-color 2ms linear;
-ms-transition: background-color 2ms linear;
transition: background-color 2ms linear;
}
#status.alert {
background: #F7F778; /* IE */
background: rgba(255, 255, 0, 0.5); /* Everyone else */
}
JavaScript
function message (msg) {
$("#status").text(msg).clearQueue().queue(function (next) {
$(this).addClass("alert"); next();
}).delay(200).queue(function (next) {
$(this).removeClass("alert"); next();
});
}
$("#do-something").click(function() {
message("Clicked! "+Math.random())
});