javascript - Hammer.js and jQuery confusing classes -

i trying make web app run on phone. using hammer.js library recognizing touch gestures , animate.css animations. use swipeleft , swiperight touch recognizers change classes of div elements. when use swiperight , swipeleft (while testing on chrome or iphone) gets classes mixed , elements in wrong position.

here of code

index.html

<div class="container" id="app">     <div class="row">         <div class="col-xs-10 co-xs-offset-1 col-md-4 app_card active_app_card animated id="app2">             <!-- more code -->         </div>         <div class="col-xs-10 co-xs-offset-1 col-md-4 app_card animated id="app1">             <!-- more code -->         </div>         <div class="col-xs-10 co-xs-offset-1 col-md-4 app_card animated id="app3">             <!-- more code -->         </div>     </div> </div> 

stylesheet.css

 .app_card {       position: absolute;       right: -100%;  }   .active_app_card {      right: auto;      left: auto;  } 

main.js

$(function() { var app1 = document.getelementbyid("app1"); var app2 = document.getelementbyid("app2"); var app3 = document.getelementbyid("app3");  hammer(app1).on("swipeleft", function() {     console.log("app1 left");     $("#app1").addclass("slideoutleft");     $("#app2").addclass("bounceinright active_app_card").one('webkitanimationend mozanimationend msanimationend oanimationend animationend', function() {         $("#app1").removeclass("slideoutleft active_app_card");         $("#app2").removeclass("bounceinright");     }); });  hammer(app2).on("swiperight", function() {     console.log("app2 right");     $("#app2").addclass("slideoutright");     $("#app1").addclass("bounceinleft active_app_card").one('webkitanimationend mozanimationend msanimationend oanimationend animationend', function() {         $("#app2").removeclass("slideoutright active_app_card");         $("#app1").removeclass("bounceinleft").addclass("active_app_card");     }); }); 

the problem when swipe right when app2 onscreen, , swipe left when app1 onscreen, animation works , app2 comes onscreen, animation over, app2 disappears , app1 comes back. if swipe left again, app2 comes on screen properly. there anyway stop app1 appearing when swipe away it?

i seem have solved problem not starting new animation before current over. hav changed code lot cant post exact code again(it cause confusion). did set variable true while animation running. when hammer detects swipe, check variable see whether animation running or not.

here simplified form of code

window.animating = true;  hammer(app).on("swiperight", function() {     if ( window.animating === true ) {         console.log("animation running");     } else {         //next animation code     } }