Можно ли изменить цвет фона на клик, а затем автоматически переключиться обратно на секунду позже? - PullRequest
Новая
       12

Можно ли изменить цвет фона на клик, а затем автоматически переключиться обратно на секунду позже?

1 голос
/ 09 июня 2010

Noob здесь - я работаю над простым калькулятором Javascript, и я использую списки (li) для кнопок.Я хочу, чтобы цвет фона изменялся на клике, но затем автоматически менялся обратно на полсекунды.Поэтому в основном я хочу, чтобы нажатие кнопки мигало новым цветом, а не переключало его.

Возможно ли это?

Редактировать: это то, что у меня сейчас в заголовке, но оно все еще не работает: 

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

и мои теги li: 

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

Ответы [ 4 ]

8 голосов
/ 09 июня 2010 
$('.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);
});

рабочий образец

jQuery-UI будет анимировать значения цвета с помощью плагина jquery-color, если вы в этом

3 голосов
/ 09 июня 2010

Конечно возможно!

Ознакомьтесь с документацией для setTimeout ()

Вот ссылка, с которой можно начать.

http://www.w3schools.com/js/js_timing.asp

1 голос
/ 09 июня 2010

Вы можете добавить стиль цвета фона к элементу при нажатии и использовать функцию setTimeout, чтобы удалить его позже: 

$(function(){
  $('li').click(function(){
    var e = $(this);
    e.css('background-color', 'red');
    window.setTimeout(function(){
      e.css('background-color', '');
    }, 500);
  });
});

(Примечание: в jQquery есть метод delay,но он предназначен для использования с анимацией, а не в качестве замены setTimeout.)

Рабочий пример: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="sv" xml:lang="sv">
<head>
<title>Test</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">

$(function(){
  $('li').click(function(){
    var e = $(this);
    e.css('background-color', 'red');
    window.setTimeout(function(){
      e.css('background-color', '');
    }, 500);
  });
});

function calc(digit) {
    var lcd = $('#lcd');
    lcd.text(lcd.text() + digit);
}

</script>

</head>
<body>

<div id="lcd"></div>

<ul>
  <li class="key" onClick="calc('1')">1</li>
  <li class="key" onClick="calc('2')">2</li>
  <li class="key" onClick="calc('3')">3</li>
  <li class="key" onClick="calc('4')">4</li>
  <li class="key" onClick="calc('5')">5</li>
  <li class="key" onClick="calc('6')">6</li>
  <li class="key" onClick="calc('7')">7</li>
  <li class="key" onClick="calc('8')">8</li>
  <li class="key" onClick="calc('9')">9</li>
  <li class="key" onClick="calc('0')">0</li>
</ul>

</body>
</html>
1 голос
/ 09 июня 2010

Если вы хотите изменить разметку, чтобы каждая кнопка была элементом (возможно, внутри этих элементов li), вы можете использовать 

a:active {

Чтобы изменить внешний вид кнопок при нажатии. http://www.w3schools.com/CSS/css_pseudo_classes.asp

...