-8

How can I change border color of the clicked for 10 seconds and then change back to original?

Üh Lieh
  • 35
  • 2
  • 6
  • 2
    Bind click event on button. In handler change border color. `setTimeout` with 10 seconds to reset the border color. – Tushar Apr 20 '17 at 07:34
  • Please put in your html –  Apr 20 '17 at 07:34
  • What you have tried so far? – Ataur Rahman Munna Apr 20 '17 at 07:35
  • 2
    Welcome to Stack Overflow! Please take the [tour](http://stackoverflow.com/tour), have a look around, and read through the [help center](http://stackoverflow.com/help), in particular [How do I ask a good question?](http://stackoverflow.com/help/how-to-ask) Make an effort to solve the problem. If you run into a specific issue doing so, post a question with your attempt (including all the relevant code), saying what isn't working, and explaining your research so far. – Rory McCrossan Apr 20 '17 at 07:37
  • Asking a question on StackOverflow should be the last action you take when trying to find an answer to a problem. You're expected to try and solve the problem yourself first, either by looking at other questions online first or asking coworkers/friends. – George Apr 20 '17 at 07:38

4 Answers4

5

Can you try this solution ? :)

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

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>
Justinas
  • 41,402
  • 5
  • 66
  • 96
0

If you want to use jQuery do something like this:

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

Please note that you can't do it with jQuery alone - because animate can't use colors. So you need to add jQuery UI for Example to extend jQuery.

Stefan F.
  • 608
  • 7
  • 15
-1

i think you need to try like this

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