1

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

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

这是我的情况：我有一个页脚，其中包含一个分为 2 部分的导航 - 每个 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>

这是相关的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' )
    } );
4

0 回答 0