jquery - jquery animate left 固定ローディング div

Question

これは単純なはずですが、何が間違っているのかわかりません。左下隅にある固定 div を使用して、読み込み/スピナー div を表示しています。

ローダーは、表示時に左から右にスライドする必要があります (最初は、display:none; に設定されています)。非表示にすると、右から左にスライドして消えます。

JSFIDDLEはこちら

CSS

#loading span {
    float:left;
    margin-top :1px;
    margin-left :3px;
    margin-right :3px;
    line-height:16px;
    font-size:12px;
    font-family:"oswald";
}
#loading img {
    float:left;
    margin-top : 1px;
}
#loading {
    display: none;
    position: fixed;
    z-index: 1000000;
    left:0;
    top:90% !important;
    width:60px;
    height:20px;
    background: black;
    color:white;
    border: 1px solid #ddd;
}

HTML:

<button type="button" id="sh">Show!</button>
<button type="button" id="hd">Hide!</button>

<div id="loading"><span> loading </span>
    <img class="loader" src=" http://i.stack.imgur.com/FhHRx.gif" width="16" height="16" />
</div>

JavaScript

// Show loading 
$('#sh').on('click', function () {
     $("#loading")
         .animate({
             left: -160
         }, {
             duration: 'slow',
             easing: 'easeOutBounce'
         })
         .animate({
             left: 0
         }, {
             duration: 'slow',
             easing: 'easeOutBounce'
         })
         .show();
 });