CODEWITHSUNDEEP
jqueryanimationtoggleclass
Xeen
Xeen

Reputation: 7003

jQuery removeClass animation not working

I'm having an onclick action to perform this function:

$('#generalMenu').stop(true, true).toggleClass('slideLeft', 1000)

and the slideLeft does slide when the toggleClass has addClass mode on it, but not on removeClass - how could I make it work for both?

Upvotes: 0

Views: 1363

Answers (3)

thephper
thephper

Reputation: 2610

I landed here because I couldn't get removeClass to animate. As it is pointed out earlier, the addClass and removeClass does not accept a "duration" parameter. This is only possible, when jqueryUI is loaded.

Even though I had problems.

I solved mine by changing the css from:

.active { bottom: -150px; }

To:

.active { margin-top: 150px; }

After that, both the addClass and removeClass-methods was animating as excepted!

Upvotes: 1

Pixelomo
Pixelomo

Reputation: 6737

Have you tried just:

$('#generalMenu').toggleClass('slideLeft', 1000);

or 

setTimeout(function(){
   $('#generalMenu').toggleClass('slideLeft');
},1000)

or instead of an onclick function change your code to:

$('.element').click(function(){ 
   $('#generalMenu').toggleClass('slideLeft'); 
})

another way is using if/else conditionals:

$('.element').click(function(){ 
   if($('#generalMenu').hasClass('slideLeft')){
        $('#generalMenu').removeClass('slideLeft');
   } else {
      $('#generalMenu').addClass('slideLeft'); 
   }
});

Upvotes: 0

connexo
connexo

Reputation: 56753

Try adding transition-duration: 1000; to your css for #generalMenu.

#generalMenu { transition-duration: 1000; }

Upvotes: 0

Related Questions