title: Changing bottom and top values in a CSS transition on click
body: <p>I have a <code>div</code> with a <code>fixed</code> position that is supposed to slide up/down on click. I'm trying to get this to work with a smooth CSS <code>transition</code> but it only jumps up/down when clicked. I'm probably missing something obvious here but can't figure out what. </p>
  
  <p>Any ideas? </p>
  
  <p><strong><a href="http://jsfiddle.net/8d19f59q/" rel="nofollow">I've created a demo here.</a></strong></p>
  
  <p><strong>My CSS:</strong></p>
  
  <pre><code>  .wrapper {
        position: fixed;
        bottom: 30px;
        top: initial;
        background: green;
        width: 100%;
        height: 20px;
        -webkit-transition: all 1s ease;
        -moz-transition: all 1s ease;
        -o-transition: all 1s ease;
        -ms-transition: all 1s ease;
        transition: all 1s ease;
    }
    .wrapper.slide-up {
        top: 0px;
        bottom: initial;
    }
    .wrapper.slide-down {
        top: auto;
        bottom: 36px;
    }
  </code></pre>
  
  <p><strong>My JS:</strong></p>
  
  <pre><code>  var wrapper = $('.wrapper');
  
    $(wrapper).click(
  
    function () {
        if (wrapper.hasClass('slide-up')) {
            wrapper.addClass('slide-down').removeClass('slide-up');
        } else {
            wrapper.removeClass('slide-down').addClass('slide-up');
        }
    });
  </code></pre>