以下代码在ie8 64位版本的动画期间生成一些工件。似乎在32位版本中工作正常。
我制作了一个小屏幕截图视频，以显示会发生什么：
http://www.youtube.com/watch?v=MKeeWv5DqK0
一些想法？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="style.css" />
<title>Untitled Document</title>
</head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.product').each(function() {
//$(this).children().animate({'top' : '150px', 'left' : '300px'}, 500);
$(this).hover(
function(){$(this).children().animate({'left' : '210px'}, {queue: false}, 500)},
function(){$(this).children().animate({'left' : '0px'},{queue: false}, 500)} );
});
});
</script>
<body>
<div id="wrapper">
<div class="product"><div class="product_cover"></div></div>
<div class="product"><div class="product_cover"></div></div>
<div class="product"><div class="product_cover"></div></div>
<div class="product"><div class="product_cover"></div></div>
<div class="product"><div class="product_cover"></div></div>
<div class="product"><div class="product_cover"></div></div>
</div>
</body>
</html>
#wrapper
{
width:800px;
height:420px;
padding:30px;
border:1px solid #999;
background-color:#ddd;
margin:0 auto;
margin-top:100px;
}
.product
{
position:relative;
width:206px;
height:150px;
background-color:#0FC;
float:left;
margin:30px;
}
.product_cover
{
position:absolute;
top:0;
left:0;
background-color:#F63;
width:100%;
height:100%;
}