toggleClass and slideToggle bug

Question

The main question I have concerns toggleClass(). Since I'm not the greatest with jQuery, I'm not sure what to search for. Here is my code:

JS

jQuery.noConflict();

jQuery(document).ready(function() {

    jQuery('.quickLinks').click(function() {

        var options = {direction: 'right'};
        var duration = 400;

        jQuery('#quickLinks').slideToggle(options, duration);
        jQuery('.quickLinks').toggleClass('sidebar-blue');
    });

    jQuery('.quickLinks').hover(function() {

        jQuery(this).css({
            'border-top-color': '#1C8BE6',
            'color': '#1C8BE6'
        });
    }, function() {

        jQuery(this).css({
            'border-top-color': '#003663',
            'color': '#fff'
        });
  });
});

CSS

/** Style for the button & div **/

.sidebar {
  position: fixed;
  bottom: 0;
  z-index: 100;
  width: 100%;
  display: block;
}

.quickLinks, #quickLinks {
  float: right;
  margin-left: 100%;
  width: 230px;
}

.quickLinks {
  cursor: pointer;
  padding: 10px 0px 5px;
  background-color: #003663;
  white-space: nowrap;
  text-align: center;
  font-family: 'Just Another Hand', Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 26px;
  color: #fff;
  border-top: 3px solid #003663;
  border-radius: 5px 5px 0px 0px;
}

.quickLinks.sidebar-blue {
  line-height: 20px;
  color: #1C8BE6 !important;
  border-top: 3px solid #1C8BE6 !important;
}

#quickLinks {
  position: relative;
  display: none;
  background-color: #003663;
  right: 0px;
  z-index: 100;
}

#quickLinks > ul {
  list-style-type: none;
  float: right;
  margin: 5px 10px;
  padding-left: 0px;
}

#quickLinks > ul > a > li {
  color: #fff;
  white-space: nowrap;
}

#quickLinks > ul > a > li:hover {
  color: #1C8BE6;
}

When I expand the menu, the head text is blue. After clicking it again to slide down the menu, the "Quick Links" text remains blue until you move the mouse. I'd like it to change either right when it's clicked again or once the sliding transition is complete.

The other question I have is whenever clicking the second time, the menu jumps. It goes up a few pixels before returning down. It doesn't happen on the actual site I'm using this for, but it does in jsfiddle. I'd just like to know why.

Here's where I'm at so far :

Fiddle