Why does this toggleClass not work?

Question

I have a button:

<div id="headBtn"> </div>

I have a class:

.slideout { -webkit-transform: translate3d(265px, 0, 0); position:absolute; left:0; transition: -webkit-transform .5s ease; }

I have a function:

$('#headBtn').on('click',function(){ var wrap = $('#wrapper'); wrap.toggleClass('slideout'); });

The aim is to have my #wrapper element move to the right using webkit-tansform, I then want to toggle that css so it snaps back to the left again.

Right now the #wrapper element does snap back to the left for a second but it moves to the right again, as if the css is removed but then applied again.

Any ideas why this is happening?

I can't reproduce the problem. It does snap back left and stay there: jsfiddle.net/8HmEt Where is your javascript block-located maybe that is the issue? — Esko
– Esko, Commented Jan 30, 2014 at 13:27
Thanks @Esa I thought I was just going crazy, so my problem is elsewhere. Why would the position of my block matter? — UzumakiDev
– UzumakiDev, Commented Jan 30, 2014 at 13:31
@UzumakiDev You will need to post more of your code, because with the limited code you gave us, what you described isn't happening. — Alex W
– Alex W, Commented Jan 30, 2014 at 13:33
If your code is run multiple times, there would be many click-handlers, which could explain the problem. — Esko
– Esko, Commented Jan 30, 2014 at 13:36
Ohhhh, wait, fixed it, no worries, I'm just stupid. I had another function using hammer.js that had on('tap',function(){ $(this).removeClass('slideout'); }); this was on the wrapper element itself. SOrry for wasting your time. But you did confirm it wasn't the toggle function itself. — UzumakiDev
– UzumakiDev, Commented Jan 30, 2014 at 13:36

Alex W · Accepted Answer · 2014-01-30 13:24:07Z

It's because when you are removing the class, you are removing the CSS transition defined in it. If you apply that transition to all elements, it still works when you remove the class:

.slideout { -webkit-transform: translate3d(265px, 0, 0); position:absolute; left:0; } * { transition: -webkit-transform .5s ease; }

http://jsfiddle.net/6Eq4B/

Hmm he said the problem was that it snaps to the left and then moves to the right again. This doesn't answer that problem. Though I didn't experience that problem myself when I tested the original code.

Collectives™ on Stack Overflow

Why does this toggleClass not work?

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related