title: Toggling Animations when Using Animate.css
body: <p>I'm currently trying to have a panel I've made to animate in an out of the screen. i.e. when I  click on a button it animates onto the screen and when I click the same button again it animates off the screen. But What happens is the panel on page load is on the screen. When I click the button it animates fine off the screen and when I click on the button again it never animates back onto the screen. I'm not sure what I'm doing wrong... Here's my code:</p>
  
  <pre><code> $(document).on('pageinit','#sellbookpage',
          function()
          {   
              flagclass = true;
              //button that gets clicked
              $('#SignUpLink').click(function() 
              {
                  if(flagclass)
                  {
                      $('#signinput').addClass("animated  fadeOutDownBig");
                      flagclass = false;
                  }
                  else
                  {
                      $('#signinput').addClass("animated  fadeOutUpBig");
                      flagclass = true;
                  }
  
              }););
  </code></pre>
  
  <p>Basically the functionality I'm looking for is to have the panel animate in and out of the screen as I click on the button.</p>