jquery - Class toggles but re-attaches itself after the animation and class removal completes -

i'm trying create design click on box, it'll slide view more content, , when click arrow, it'll return.

the problem this:

        $(boxes).one('webkitanimationend mozanimationend msanimationend oanimationend animationend', function() {             boxes.parent().css({                  'height' : '0',                  'opacity' : '0',                 'overflow' : 'hidden'             });              fboxcontentcover.css({              'height' : 'auto',              'opacity' : '1',             });              fboxcontentcover.removeclass('fadeoutleft').addclass('animated bounceinright');         });          $(fboxcontentcover).one('webkitanimationend mozanimationend msanimationend oanimationend animationend', function() {              fboxcontentcover.css({                  'height' : '0',                  'opacity' : '0',                 'overflow' : 'hidden'             });              $('.fbox').parent().css({              'height' : 'auto',              'opacity' : '1',             });              $('.fbox').removeclass('fadeoutleft').addclass('animated fadeinright');         }); 

when first 1 done, goes second view successfully, however, when click back, it'll slide first view again, it'll flash second view again , go first view, again.

how can stop happening?

the code , here: https://codepen.io/anon/pen/jnodjo

when adding .toggleclass instead of .removeclass().addclass(), animation stops working.

it appears that, when click on first set of boxes, animationend fires on boxes, , slide out of view.

when click "back button" on second set, animation event wired back button fires, , first set of boxes come view. (cool far)

but now, webkitanimationend fires on first set of boxes come view, repeats sliding effect again redundantly.

the fact timing appears different 2 events is odd, bottom line .one() hooking 2 events chrome recognizes want one. using modernizr function:

function whichanimationevent() {       var t,           el = document.createelement("fakeelement");       var animations = {           "animation"      : "animationend",           "oanimation"     : "oanimationend",           "mozanimation"   : "animationend",           "webkitanimation": "webkitanimationend"       };       for(t in animations) {           if (el.style[t] !== undefined){               return animations[t];           }       }   } 

like so:

 $(boxes).one(whichanimationevent(), function(ev) { } 

seems solve problem, can check here: https://codepen.io/anon/pen/awzaqn