好的，我会尽量让这个问题更容易理解……来吧。我目前在我的网站上使用 JQuery 动画。动画效果很好；但是，当页面刷新时，包含动画的 div 在它们将自己定位到正确位置之前会跳来跳去。有时 div 甚至会在不同的垂直位置加载（然后它会一直保持这种状态，直到光标悬停在图像/div 上。有问题的 div 是 row1 和 row2 div。这个问题似乎主要发生在 Chrome 中。我'正在寻找一种方法来让跳转停止并让 div 100% 的时间加载到正确的位置。
这个问题发生在我网站的这个页面上：http: //derektice.com/pages/fourthyear.html
html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>PORTFOLIO || Derek Tice</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<link href="../stylesheets/global.css" rel="stylesheet" type="text/css">
<link href="../stylesheets/fourthyear.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../stylesheets/fourthyear.js"></script>
<script type="text/javascript" language="javascript">
window.onload = function()
{
init();
};
</script>
</head>
<div style="width:1px; height:1px; visibility:hidden; overflow:hidden">
<img src="../images/nav_bar/home-hover.png" />
<img src="../images/nav_bar/about-hover.png" />
<img src="../images/nav_bar/contact-hover.png" />
<img src="../images/nav_bar/downloads-hover.png" />
<img src="../images/nav_bar/fourthyear-hover.png" />
<img src="../images/nav_bar/thirdyear-hover.png" />
<img src="../images/nav_bar/secondyear-hover.png" />
<img src="../images/nav_bar/extra-hover.png" />
</div>
<body>
<div id="container">
<div id="titleblock">
<a href="../index.html"><img src="../images/title.png"></a>
<div id="navigation">
<a href="../index.html" class="home"></a>
<a href="about.html" class="about"></a>
<a href="contact.html" class="contact"></a>
<a href="downloads.html" class="downloads"></a>
<p>
<a href="fourthyear.html"><img src="../images/nav_bar/fourthyear-hover.png"></a>
<a href="thirdyear.html" class="third"></a>
<a href="secondyear.html" class="second"></a>
<a href="extra.html" class="extra"></a>
</div>
<div id="content">
<div id="row1">
<div class="img-wrap">
<div class="scraperfilter"></div>
<a href="skyscraper.html"><div class="overlay"></div></a>
<a href="skyscraper.html"><img src="../images/skyscraper.png"/></a>
<div id="text1"></div>
</div>
</div>
<div id="row2">
<div class="img-wrap">
<div class="busbarnfilter"></div>
<div class="overlay"></div>
<a href="busbarn.html"><img src="../images/busbarn.png"/></a>
<div id="text2"></div>
</div>
</div>
</div>
</div>
<div id="copyright">
Copyright © 2013 || All rights reserved
</div>
</div>
</body>
</html>
对应的css
body{
width:1012px;
margin-right:auto;
margin-left:auto;
text-align:left;
font-family:arial;
font-size:11px;
color:#c9c9c9;
margin-top:0px;
}
a img{
border:none;
}
#container{
width:1012px;
height:423px;
background-color:#ffffff;
top:15%;
position:absolute;
}
#titleblock{
width:200px;
height:403px;
background-color:#4a4a4a;
opacity:.95;
}
#content{
width:809px;
height:403px;
margin-left:203px;
margin-top:-37px;
display:inline-block;
background-color:;
}
#navigation{
width:195px;
height:173px;
position:absolute;
bottom:15px;
padding-left:5px;
}
#copyright{
width:1002px;
height:20px;
margin-top:2px;
padding-left:7px;
text-align:left;
}
#row1{
width:200px;
height:403px;
background-color:#ffffff;
display:inline-block;
margin-top:0px;
position:absolute;
}
#text1{
width:200px;
height:203px;
background-image:url('../images/skyscraper-text.png');
margin-top:0px;
position:relative;
cursor:default;
}
#row2{
width:200px;
height:403px;
background-color:#ffffff;
display:inline-block;
z-index:20;
position:absolute;
margin-left:203px;
}
#text2{
width:200px;
height:203px;
background-image:url('../images/busbarn-text.png');
margin-top:0px;
position:relative;
z-index:30;
cursor:default;
}
jQuery
$(function () {
$('.img-wrap')
.mouseenter(function () {
$(this).find('.overlay').stop().animate({top:"203px"}, 200);
})
.mouseleave(function () {
$(this).find('.overlay').stop().animate({top: 0}, 300);
});
$('.img-wrap2')
.mouseenter(function () {
$(this).find('.overlay2').stop().animate({top:"203px"}, 200);
})
.mouseleave(function () {
$(this).find('.overlay2').stop().animate({top: 0}, 300);
});
});