title: Twitter bootstrap modal animation on close
body: <p>I am trying to add animation to bootstraps modal using animate.less library.</p>
  
  <p>The animation is working completely when it is to show the modal. But on hide of the modal the animation is not working. I have created a jsfiddle to replicate the same.</p>
  
  <p><a href="http://jsfiddle.net/W6G4q/1/" rel="nofollow">http://jsfiddle.net/W6G4q/1/</a></p>
  
  <pre><code>&lt;a href="#" role="button" class="letclick btn btn-warning" id='loginLink' targetLink="login"&gt;     
          &lt;i class="icon-user icon-white"&gt;&lt;/i&gt;
          Sign In
      &lt;/a&gt;
      &lt;div class="modal hide login-modal animated bounceOutRight" tabindex="-1"  aria-labelledby="LoginModal" aria-hidden="true" id="login" &gt;
  &lt;div class="modal-header"&gt;
      &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;Ã—&lt;/button&gt;
      &lt;h3 id="myModalLabel"&gt;Login&lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="modal-body"&gt;
  
   SHOWING
  &lt;/div&gt;
      &lt;div class="modal-footer"&gt;
      &lt;button class="btn" data-dismiss="modal" aria-hidden="true"&gt;Close&lt;/button&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>     $('#loginLink').click(function(){
          $('#login').modal({
          backdrop: true,
          keyboard: true
      }).css({
          'width': function () {
              return (350) + 'px'; 
          },
          'margin-left': function () {
              return -($(this).width() / 2);
          }
      });
  
          $('#login').toggleClass('bounceInLeft bounceOutRight')
      });
       $('#login').on('hide', function(){
  
          $(this).toggleClass('bounceOutRight bounceInLeft');
  
  
      });
  </code></pre>
  
  <p>bounceOutRight and bounceInLeft are working properly and are css based animations provided by the library animate.less</p>
  
  <p>I am sure im not calling hide correctly, maybe hide is putting in the hidden class before the animation. Im not sure, any help would be great. </p>
  
  <p>JS fiddle link: <a href="http://jsfiddle.net/W6G4q/1/" rel="nofollow">http://jsfiddle.net/W6G4q/1/</a></p>