chrome 中的 Jquery .animate() 错误
Posted
技术标签:
【中文标题】chrome 中的 Jquery .animate() 错误【英文标题】：Jquery .animate() bug in chrome 【发布时间】：2013-05-27 05:57:06 【问题描述】：我有一个网页，其中 jquery 的 animate() 函数在 IE 和 FF 中运行良好，但在 Chrome 中运行异常 这是我的代码
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
html
width:100%;
height:100%;
body
margin: 0;
padding: 0;
width: 100%;
height: 100%;
ul, ol, dl
padding: 0;
margin: 0;
.clearFloat
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
#navigation
width:100px;
height:100%;
position:fixed;
z-index:1;
left:0px;
position:relative;
#navigation .title-list
width:450px;
position:relative;
left:-350px;
height:100px;
#navigation .title
width:90px;
height:30px;
background-color:#f5f5f2;
position:absolute;
right:-90px;
top:35px;
#navigation .image
width:100px;
height:100px;
float:right;
background-color:#e5e5e4;
#navigation .image_hover
width:100px;
height:100px;
float:right;
background-color:#e5e5e4;
display:none;
#navigation .title-list:hover .image
display:none;
#navigation .title-list:hover .image_hover
display:block;
#navigation .sub-menu
width:350px;
height:30px;
float:right;
background-color:#f5f5f2;
margin-top:35px;
position:relative;
#navigation .title-list .drop-sub
display:none;
#navigation .title-list:hover .drop-sub
display:block;
position:absolute;
z-index:2;
width:225px;
right:20px;
background-color:#CC3;
padding-top:70px;
#navigation .sub-list
width:205px;
padding:10px;
height:30px;
background-color:#e5e5e4;
#navigation a
display:inline-block;
width:100%;
height:100%;
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e)
$('#navigation .expand').hover(function()
$(this).stop().animate('left':'0px','fast');
, function(e)
$(this).stop().animate('left':'-350px','fast');
);
);
</script>
</head>
<body>
<div id="navigation">
<ul>
<li class="title-list expand"><div class="title">About</div><img src="images/navigation/about.png" class="image" /><img src="images/navigation/about_hover.png" class="image_hover" />
<div class="sub-menu">
<div class="drop-sub">
<div class="sub-list"><a href="#">College</a></div>
<div class="sub-list"><a href="#">History</a></div>
<div class="sub-list"><a href="#">Principal's Message</a></div>
<div class="sub-list"><a href="#">Contact</a></div>
<div class="sub-list"><a href="#">Gallery</a></div>
</div>
</div>
</li>
<li class="title-list expand"><div class="title">Academics</div><img src="images/navigation/academics.png" class="image" /><img src="images/navigation/academics_hover.png" class="image_hover" />
<div class="sub-menu">
<div class="drop-sub">
<div class="sub-list"><a href="#">Subjects</a></div>
<div class="sub-list"><a href="#">Structure</a></div>
</div>
</div>
</li>
</ul>
</div>
</body>
</html>
当我在 FF 或 IE 中运行此代码并将鼠标悬停在菜单项上时，菜单项按预期向右移动
当我在 chrome 中运行此代码并将鼠标悬停在其中一个菜单项上时，菜单首先向左移动一点，然后向右移动到预期位置
有人有解决办法吗？
编辑：------
发生这种情况是因为在 Chrome 中缩放设置为 110%。 但是，任何人都有解决方案来避免这种情况？
【问题讨论】：
下次请创建一个 jsfiddle，这样我们可以更快地帮助您:) here is yours 我在 Google Chrome 版本 27 中看不到左侧的菜单.. 把它放在一个小提琴中，目前在我的 chrome 上工作正常......也许其他人可以试试jsfiddle.net/dtcy7 在 FF 和 Chrome 中对我来说一切正常。这是您的代码的fiddle link。 【参考方案1】：这是因为 Chrome 中的定位设置为自动，在页面加载时。
如果您首先在 jQuery 中将 left 设置为页面加载时的状态，那么您应该没问题。
【讨论】：
以上是关于chrome 中的 Jquery .animate() 错误的主要内容，如果未能解决你的问题，请参考以下文章
jQuery animate() 在 Google Chrome 和 Safari 中的左侧位置
jQuery .animate( 'width' : 'show' ) 在 Chrome/Safari 中无法正常工作？
jQuery .animate() 只在 Chrome 中动画，在其他浏览器中瞬时变化
仅在 Chrome 中使用背景固定图像和 jquery.Animate 的错误