我在这里找到了几十个类似的问题,但我读到的都没有给出我的问题的明确答案:如何在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' )
} );