title: How can I enable CSS Transitions when switching between a fixed-top navbar and a fixed-bottom (w/ Bootstrap)
body: <p>Okay, so I'm using Twitter Bootstrap and I have a "navbar navbar-fixed-top"; however, on some pages I want the navbar to be at the bottom. As a test, I've used jQuery to toggle the classes on click, like so: </p>
  
  <pre class="lang-js prettyprint-override"><code>function toggleMainNav() {
      $("#main-nav")
          .toggleClass("navbar-fixed-top")
          .toggleClass("navbar-fixed-bottom");
  }
  </code></pre>
  
  <p>Which works fine, but of course, it's instant.</p>
  
  <p>I would like it to <em>transition</em> between the two. However, I am not very experienced with CSS transitions and after a couple hours of Googling and reading and watching... I still can't get it to work. </p>
  
  <p>Here's a CSS snippet</p>
  
  <pre class="lang-css prettyprint-override"><code>#main-nav {
      -webkit-transition: all 0.5s;
  }
  </code></pre>
  
  <p>And if I do a test like this (to make sure I used the correct transition property)</p>
  
  <pre class="lang-css prettyprint-override"><code>#main-nav:hover {
      background-color: #55dd66;
  }
  </code></pre>
  
  <p>It works fine.</p>
  
  <p><em>(more info for those who don't use Bootstrap: navbar-fixed-top makes top:0 and bottom:auto and navbar-fixed-bottom does the opposite)</em></p>
  
  <p>Thanks in advance.</p>