title: Hammer.js and jQuery confusing classes
body: <p>I am trying to make a web app that would run on my phone. I am using the Hammer.js library for recognizing touch gestures and animate.css for the animations. I use the <code>swipeleft</code> and <code>swiperight</code> touch recognizers to change the classes of certain <code>div</code> elements. however when I use <code>swiperight</code> and then <code>swipeleft</code> (while testing it on chrome or my iphone) it gets the classes mixed up and the elements are in the wrong position.</p>
  
  <p>Here is some of my code</p>
  
  <p>index.html</p>
  
  <pre><code>&lt;div class="container" id="app"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-xs-10 co-xs-offset-1 col-md-4 app_card active_app_card animated id="app2"&gt;
              &lt;!-- More code --&gt;
          &lt;/div&gt;
          &lt;div class="col-xs-10 co-xs-offset-1 col-md-4 app_card animated id="app1"&gt;
              &lt;!-- More code --&gt;
          &lt;/div&gt;
          &lt;div class="col-xs-10 co-xs-offset-1 col-md-4 app_card animated id="app3"&gt;
              &lt;!-- More code --&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>stylesheet.css</p>
  
  <pre><code> .app_card {
        position: absolute;
        right: -100%;
   }
  
   .active_app_card {
       right: auto;
       left: auto;
   }
  </code></pre>
  
  <p>main.js</p>
  
  <pre><code>$(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");
      });
  });
  </code></pre>
  
  <p>The problem is when I swipe right when <code>app2</code> is onscreen, and then swipe left when <code>app1</code> is onscreen, the animation works and <code>app2</code> comes onscreen, but as soon as the animation is over, <code>app2</code> disappears and <code>app1</code> comes back. if I swipe left again, <code>app2</code> comes on screen properly. Is there anyway to stop <code>app1</code> from appearing when I swipe away from it?</p>