javascript - Add active class to an element onclick just for the duration of click using jquery -

i'm trying add active class element when clicks on , auto remove immediately.

i've tried below methods no luck yet -

method - 1

settimeout(function() {     $('.classname').on('click', function() {         $('.classname').addclass('active');     }, 1000); }); 

method - 2

$('.classname').on('click', function() {     $( ".classname" ).switchclass( "active", "no-active", 1000 ); }); 

you're correct in need use settimeout(), logic little off.

firstly need use settimeout() within click handler. need call removeclass() on reference clicked element when timer completes. try this:

$('.classname').on('click', function() {    var $el = $(this).addclass('active');    settimeout(function() {      $el.removeclass('active');    }, 1000);  });

div {    transition: color 0.3s, background-color 0.5s;  }  .active {     color: #fff;    background-color: #c00;   }

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

however, image posted looks may need add :active state. applied element while mouse button held down on it:

div:active {    background-color: #c00;    color: #fff;  }

<div>click me</div>