CODEWITHSUNDEEP
javascriptjqueryhtml
rowdy
rowdy

Reputation: 47

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

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 );
});

Upvotes: 1

Views: 2115

Answers (4)

Bhargav Chudasama
Bhargav Chudasama

Reputation: 7165

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.

Upvotes: 0

Soft One Global
Soft One Global

Reputation: 175

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

Upvotes: 0

Amr Elgarhy
Amr Elgarhy

Reputation: 68902

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>

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337560

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>

Upvotes: 1

Related Questions