The removeClass method in Jquery seems to be ineffective when attempting to create a simulated active button using a DIV element

Question

The removeClass method in Jquery seems to be ineffective when attempting to create a simulated active button using a DIV element

Since CSS is not my strong suit, I'm attempting to create a pressed button effect using the :active pseudo-class by applying a "glow" class to a DIV element with jQuery's addClass method and then removing it after a brief delay.

This is how I have written the code:

  $( ".cpUpbtnsclass" ).on('click', function() {

        console.log($( this ).attr('id')+" is clicked and a class will be added ! ");

           $( this ).addClass( "glow");

        setTimeout(function(){
            $( this ).removeClass( "glow");
        },300);
    });

And here is the CSS class that I am trying to add:

.glow {
box-shadow: 0px 0px 15px 5px rgba(255, 255, 190, .75);
}

I can see the glow effect being added with addClass, but it doesn't seem to disappear after 300ms as intended.

jquery css removeclass

Answer 1

Answer №1

In the scenario of a timeout, a separate context is established where the reference to the element changes:

$( ".cpUpbtnsclass" ).on('click', function() {
    var self = this;

    $( this ).addClass( "highlight");

    setTimeout(function(){
        $( self ).removeClass( "highlight");
    },300);
});

Answer 2

In the scenario of a timeout, a separate context is established where the reference to the element changes:

$( ".cpUpbtnsclass" ).on('click', function() {
    var self = this;

    $( this ).addClass( "highlight");

    setTimeout(function(){
        $( self ).removeClass( "highlight");
    },300);
});

Answer 3

Answer №2

Attempt

$(".cpUpbtnsclass").on('click', function () {
    var current = $(this); //store selected element 
    current.addClass("glow"); 
    setTimeout(function () {
        current.removeClass("glow"); //use stored element 
    }, 300);
});

The use of timeout creates a separate scope, causing $(this) to refer to a different element within the setTimeout function.

Answer 4

Attempt

$(".cpUpbtnsclass").on('click', function () {
    var current = $(this); //store selected element 
    current.addClass("glow"); 
    setTimeout(function () {
        current.removeClass("glow"); //use stored element 
    }, 300);
});

The use of timeout creates a separate scope, causing $(this) to refer to a different element within the setTimeout function.

Answer 5

Answer №3

$(document).ready(function(){
    $(document).on('click', '.upBtnClass', function(){
        console.log($( this ).attr('id')+" has been clicked and a special effect will be applied! ");
           $('.upBtnClass').addClass( "shine");
        setTimeout(function(){
            $('.upBtnClass').removeClass( "shine");
        },300);
    })
})

Check out the live demonstration http://jsfiddle.net/8pc9m/

Answer 6

$(document).ready(function(){
    $(document).on('click', '.upBtnClass', function(){
        console.log($( this ).attr('id')+" has been clicked and a special effect will be applied! ");
           $('.upBtnClass').addClass( "shine");
        setTimeout(function(){
            $('.upBtnClass').removeClass( "shine");
        },300);
    })
})

Check out the live demonstration http://jsfiddle.net/8pc9m/

The removeClass method in Jquery seems to be ineffective when attempting to create a simulated active button using a DIV element

Answer №1

Answer №2

Answer №3

Similar questions

Is it possible to utilize jQuery to insert a chosen form into a table?

CSS Priority - determining the ultimate winner

Styling limitations encountered when using lang="scss" with scoped css

What is the best way to bridge the distance between a shrunken iframe and the following element?

What is the best way to eliminate the space underneath a graph?

Personalized Owl Carousel - OWL.JS Hover Pause Feature

What is the best way to ensure that all background images are displayed in IE when printing?

Does text disappear when hovered over in CSS?

Looking to rearrange the layout of jqgrid

Easy steps to transform a basic table into a DataTables plugin

Jquery Autocomplete with Dynamic Text Updates

Safari displays text in a noticeably bigger font size compared to other browsers

Is it possible to utilize an AJAX request to access a custom JSON file stored locally in order to dynamically generate Bootstrap

The x-axis values in Amchart are transitioning rather than shifting

How can I create multiple divs that look alike?

How to access a variable from within a Phonegap DB function and return it outside of the

What is the HTML code needed to stack two divs on top of each other?

The CSS file is not appearing, causing the styling not to be applied

Adjust the background to scroll to the bottom of the image first and then change it to be fixed

Leveraging the Power of jsPDF in Your Google Apps Scripts