CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Blaze Rowland
Blaze Rowland

Reputation: 93

jQuery remove/add class only works once

I'm lacking on sleep and unsure if I could use toggleClass for this. But here's my code: 

$(document).ready(function() {
    // Slide Mobile Filter Sidebar On Screen
    $('#showFilters').on('click', function () {
        $('.filter-sidebar--mobile__close').attr('class', 'filter-sidebar--mobile__close');

        $('.filter-sidebar--mobile')
            .removeClass('slide-out-right is-hidden') // Remove previously added animation remove display none
            .addClass('slide-in-right '); // Add animation
    });

    // Slide Mobile Filter Sidebar Off Screen
    $('.filter-sidebar--mobile__close').on('click', function() {
        $('.filter-sidebar--mobile')
            .addClass('slide-out-right') // Add animation
            .delay(380) // Delay for animation duration -.02s
            .queue(function() {
                $('.filter-sidebar--mobile').addClass('is-hidden'); // Hide after animation finishes
            });

        // Hide Close Button for Mobile Filter
        $('.filter-sidebar--mobile__close').attr('class', 'filter-sidebar--mobile__close is-hidden');
    });
});

This code only works through one full cycle.
What happens is;



Demo: https://jsfiddle.net/mfayv8fu/

Upvotes: 2

Views: 579

Answers (2)

Logar
Logar

Reputation: 1248

As per JQuery Documentation :

Note that when adding a function with .queue(), we should ensure that .dequeue() is eventually called so that the next function in line executes.

So, in the queue callback, your code should be :

$('.filter-sidebar--mobile')
    .addClass('is-hidden')
    .dequeue();

Or :

As of jQuery 1.4, the function that's called is passed another function as the first argument. When called, this automatically dequeues the next item and keeps the queue moving. We use it as follows:

.queue(function(next) {
    $('.filter-sidebar--mobile').addClass('is-hidden'); // Hide after animation finishes
    next();
 });

Upvotes: 1

seethrough
seethrough

Reputation: 742

You missed the dot sign in querying your classes

  $('filter-sidebar--mobile').addClass('is-hidden');

change it to 

  $('.filter-sidebar--mobile').addClass('is-hidden');

Upvotes: 0

Related Questions