0

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?

Xeen
  • 6,955
  • 16
  • 60
  • 111
  • `toggleClass` accept two parameters, class name and boolean to toggle it on and off. You are giving it numeric value of 1000 which is always true. – Tom Marulak May 14 '15 at 09:42
  • @TomMarulak then can you please show me how it would be done correctly? – Xeen May 14 '15 at 09:43
  • I am not sure what are you trying to do. Are you trying to toggle the class or animate the `#generalMenu`. Please create a demo so everyone can see what is not working. If you want to animate please see this post http://stackoverflow.com/questions/596608/slide-right-to-left – Tom Marulak May 14 '15 at 10:03

3 Answers3

1

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!

thephper
  • 2,342
  • 22
  • 21
0

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'); 
   }
});
Pixelomo
  • 6,373
  • 4
  • 47
  • 57
  • Yes and it doesn't change anything. – Xeen May 14 '15 at 09:38
  • hmm might be the timing that's messing it up, you could try `.toggleClass('slideLeft')` and wrap it in a SetTimeout to create a delay. Do you need to set the 1 second delay for any reason? – Pixelomo May 14 '15 at 09:40
  • why are you calling this toggle from an onclick action? could you change it to `$('.element').click(function(){ $('#generalMenu').toggleClass('slideLeft'); })` – Pixelomo May 14 '15 at 09:44
  • hmm weird, something else must be breaking it when it tries to remove the class, you can do it with an if else conditional instead, not sure if that'll help – Pixelomo May 14 '15 at 09:54
0

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

#generalMenu { transition-duration: 1000; }
connexo
  • 53,704
  • 14
  • 91
  • 128