仅在使用jQuery的单击持续时间内将活动类添加到元素onclick

Question

I'm trying to add active class to an element when someone clicks on it and then auto remove it immediately.

I've already tried with below methods but 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 );
});

Answer 1

You're correct in that you need to use setTimeout() , however the logic is a little off.

Firstly you need to use setTimeout() within the click handler. You will then need to call removeClass() on a reference to the clicked element when the 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, from the image you posted it looks like all you may need is to add an :active state. This is applied to the element while the mouse button is held down on it:

 div:active { background-color: #C00; color: #FFF; } 

 <div>Click me</div> 

Answer 2

I think that is is better to be done with just CSS: using :active so it will be something like this:

 button { background-color:red; } button:active { background-color:green; } 

 <button type="button"> Click Here </button> 

or with a little delay:

 button { border: 1px solid #bada55; background-color:red; transition: .50s all; transition-delay: 1s; } button:active { background-color:green; transition-delay: 0s; } 

 <button type="button"> Click Here </button> 

Answer 3

try this one

before setTimeout function call you add the class and after some seconds it will remove using settimeout

 $('.classname').click(function() { $('.classname').addClass('active'); setTimeout(function() { $('.classname').removeClass('active'); }, 500); }); 

 .active { width: 30px; height: 20px; background: blue; color: white; } 

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

and for switchclass

You are missing jQuery UI most likely, as switchClass is part of jQuery UI, and not the jQuery library.

Answer 4

 $(function () { setInterval(function () { $('.classname').addClass('active'); }, 1000); setInterval(function () { $('.classname').removeClass('active'); }, 2000); }); 

 .active{ color:red; } 

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

try this one