jQuery add and remove class - 2nd half of animation doesn't work
<p>Im making a simple proof of concept page with jQuery: </p>

<pre><code>    $('.notclicked').click(function() {
    $(this).addClass("clicked");
    $(this).removeClass("notclicked");
      $('.maps-cont').animate({
        left: '0'
      }, 500, function() {
        // Animation complete.
      });
    });

    $('.clicked').click(function() {
    $(this).addClass("notclicked");
    $(this).removeClass("clicked");
      $('.maps-cont').animate({
        left: '-320px'
      }, 500, function() {
        // Animation complete.
      });
    });
</code></pre>

<p>The idea is that clicking on div.notclicked does the first part of the animation and then changes the class to div.clicked, then as the class has changed the second part of the annimation can be triggered with the second bit of code. However for some reason the second part of the code doesnt work, the new class is not assigned and the animation doesn't run. </p>

<p>This is just a proof of concept so I know that clicking while the animation is in progress may cause issues. Rather than have my code completely rewritten to something that might be better but I wont understand, id much rather have this code fixed if ive made a simple error with it. Thanks  </p>
