JQuery change border color for 10 seconds

Use setTimeout for that.

$(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>

Leave a Comment