在IE8中使用jquery定位动画

我在这里发现了几十个类似的问题，但我读到的这些问题都没有给我的问题一个明确的答案：如何在IE8中使用jQuery设置位置动画

适用于所有其他浏览器的代码在IE8中不起作用

这是我的情况： 我有一个页脚，其中包含一个导航分为两部分-每个100%的屏幕宽度。为了显示菜单的第二部分，我使用动画

以下是我的页脚代码：

<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>

这是JS：

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

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