jquery - IE8でjqueryを使用してアニメーションを配置する

Question

ここで同様の質問を何十も見つけましたが、読んだ質問のどれも私の質問に対する明確な答えを与えませんでした: IE8 で jQuery を使用して位置をアニメーション化するにはどうすればよいですか?

他のすべてのブラウザーで機能する同じコードが IE8 では機能しません。

これが私のケースです: 2 つの部分に分割されたナビゲーションを含むフッターがあります - それぞれ 100% の画面幅です。メニューの 2 番目の部分を表示するには、アニメーションを使用します。

これが私のフッターコードです：

<div id="footer-wrapper">   

            <footer id="footer">                        
                <div id="menu-wrapper-primary">             
                    <nav class="menu-main-menu-container">
                        <ul id="menu-main-menu" class="menu">
                            <li id="menu-item-37" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-37">
                            ... 
                            </li>
                        </ul>
                    </nav>              
                    <div id="menu-next">
                        <span class="menu-next-text">more this way</span>
                        <img src="design/img/menu_more.png" alt="menu_next">                        
                    </div>

                </div>
                <!-- /menu-wrapper-primary -->

                <div id="menu-wrapper-secondary">   

                    <nav class="menu-secondary-menu-container">
                        <ul id="menu-secondary-menu" class="menu">                      
                            <li id="menu-item-483" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-483">
                            ...
                            </li>

                        </ul>
                    </nav>  

                    <div id="menu-prev">
                        <img src="/design/img/menu_back.png" alt="menu_previous">
                        <span class="menu-back-text">back to main menu</span>   
                    </div>

                </div>
                <!-- /menu-wrapper-secondary -->

            </footer>

    </div>

関連するcssは次のとおりです。

#footer-wrapper {
    width: 200%;
    background: black;
    height: 50px;
    position: relative;
}

#footer {
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    position: relative;
    height: 45px !important;
    top: 1px;
}

#menu-wrapper-primary, #menu-wrapper-secondary {
    display: inline-block;
    width: 49%;
    position: relative;
}

そして、これはJSです：

$( '#menu-next' ).click( function(){
        $( '#footer' ).animate( { left: '-49%' }, 'slow' )
    } );    
    $( '#menu-prev' ).click( function(){
        $( '#footer' ).animate( { left: '0' }, 'slow' )
    } );