jQuery动画在IE中不起作用
我想在用户单击按钮时为div创建动画。每个按钮都会将div移动到不同数量的像素。我的代码在firefox和chrome中工作,但不是IE8(我只在目前为止在IE8中测试它)。我很感激,如果有人能帮助我。jQuery动画在IE中不起作用
我的jQuery
$(document).ready(function(){
function breakline(position) {
$('#breakline').animate({ //this code won't work...
top:position},'slow');
$('#breakline').hide(); //this code would work. I put it here just for testing
//purpose
};
$('#project a').click(function(){
breakline(256);
});
$('#code a').click(function(){
breakline(200);
});
$('#skill a').click(function(){
breakline(236);
});
$('#about a').click(function(){
breakline(190);
});
$('#contact a').click(function(){
breakline(200);
});
});/* ready */
我的HTML
<body>
<div id="main">
<div id="menu-wrapper">
<ul id="menu">
<li id="project"><a href="#"></a></li>
<li id="code"><a href="#"></a></li>
<li id="skill"><a href="#"></a></li>
<li id="about"><a href="#"></a></li>
<li id="contact"><a href="#"></a></li>
</ul>
<div id='breakline'> </div>
</div> <!-- menu wrapper -->
</body>
</HTML>
CSS的一部分
#breakline
{
width:580px;
height:100px;
background-image:url('breakline.png');
background-repeat:no-repeat;
float:left;
border:1px solid black;
}
:
添加位置。
#breakline
{
width:580px;
height:100px;
background-image:url('breakline.png');
background-repeat:no-repeat;
float:left;
border:1px solid black;
position:relative;
}
我有一些定位添加到特征线类来得到它的动画,而不是仅仅躲了起来。如果添加position:relative
你的风格它工作在IE8相对于#breakline CSS类
配售之外的功能'。就绪()'不会改变任何事情。 – user113716 2010-07-11 17:39:49
感谢您的回复,但仍然无法正常工作... :( – FlyingCat 2010-07-11 17:46:35
非常感谢.... +1 – FlyingCat 2010-07-11 17:50:29
谢谢帕特里克.hide()仅用于测试目的,我不会在真实网站中使用它。复制和粘贴你的第二个代码,仍然不适合我...这么奇怪的..... + 1虽然.. – FlyingCat 2010-07-11 17:46:10
@Jerry - 对不起,我忘了我已经添加了'位置:相对'我的测试。你的问题。更新我的答案,以反映它。 – user113716 2010-07-11 17:48:26
不错!!!感谢很多!!!!想知道添加位置的原因:相对.... D – FlyingCat 2010-07-11 17:49:43