Question

Noob here – I’m working on a simple Javascript calculator, and I’m using lists (li) for buttons. I want the li background-color to change onClick, but then automatically change back half a second later. So basically I want the button click to flash the new color, not toggle it.

Is this possible?

Edit: This is what I have in my header now, but it’s still not working:

$(li).click(function() {
    var $elem = $(this);
    var oldBG = $elem.css('backgroundColor'));
    $elem.css('backgroundColor', '#FFFFFF').delay(1000).css('backgroundColor', oldBG);
});

and my li tags:

<li class="key" onClick="calc('7')">7</li>

Answer 1

$('.key').click(function() {
  // make a jQ collection of the DOM element from the event
  var $elem = $(this);
  // store the background-color
  var oldBG = $elem.css('background-color');
  // change the background color to what you want
  $elem.css('backgroundColor', '#FF0000');
  // after 1 second, change it back
  setTimeout(function() {
    $elem.css('background-color', oldBG);
  }, 1000);
}); 

working sample

jQuery-UI will animate color values using the jquery-color plugin, if you’re into that