Question

如何更改单击的边框颜色10秒钟然后更改回原始颜色？

Answer 1

使用setTimeout。

$(document).ready(function() {
  var timer;

  $('div').click(function() {
    // cancel previous timeout
    clearTimeout(timer);
    var self = $(this);
    
    // set new border collor. Or add new class for CSS integration
    self.css('border-color', 'green');

    timer = setTimeout(function() {
      // reset CSS
      self.css('border-color', '');
    }, 5000); // time in miliseconds, so 5s = 5000ms
  });
});

div {
  width: 40px;
  height: 40px;
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>

Answer 2

你能试试这个解决方案吗？：）

$("#button").on("click", function(){
    elem = $(this);
    elem.css('border-color', 'blue');
    setTimeout(function(){
        elem.css('border-color', 'red'); },
        10000);
});

Answer 3

如果你想使用jQuery做这样的事情：

$(".test").click(function(){
  $(this).animate({"border-color":"#fff"}).delay(1000).animate({"border-color":"#c00"});
});

.test {
  width: 100px;
  height: 20px;
  color:#fff;
  text-align: center;
  background: #333;
  border: 5px solid #c00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="test">Test</div>

请注意，你不能单独使用jQuery - 因为animate不能使用颜色。因此，您需要为示例添加jQuery UI以扩展jQuery。

Answer 4

我认为你需要尝试这样的

  $('#btn').click(function () {
        $(this).css('border-color', '#fff');
        setTimeout(function () {
            $('#btn').css('border-color', '#000');
        },10000);
    });

JQuery更改边框颜色10秒

4 个答案: