jQuery动画没有'；我不在IE工作_Jquery_Html_Css_Animation_Internet Explorer

jQuery动画没有'；我不在IE工作

jquery html css animation internet-explorer

jQuery动画没有'；我不在IE工作,jquery,html,css,animation,internet-explorer,Jquery,Html,Css,Animation,Internet Explorer,当用户单击按钮时，我正在尝试设置一个div的动画。每个按钮都会将div移动到不同的像素量。我的代码可以在firefox和chrome中使用，但不能在IE8中使用（到目前为止，我只在IE8中进行了测试）。如果有人能帮我，我将不胜感激我的jquery $(document).ready(function(){ function breakline(position) { $('#breakline').animate({ //this code won't work... t

当用户单击按钮时，我正在尝试设置一个div的动画。每个按钮都会将div移动到不同的像素量。我的代码可以在firefox和chrome中使用，但不能在IE8中使用（到目前为止，我只在IE8中进行了测试）。如果有人能帮我，我将不胜感激

我的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类

如果将

位置：相对

添加到您的样式中，它在IE8中工作

将函数放在

.ready（）

之外不会改变任何东西。谢谢patrick。hide（）用于测试，我不会在我的真实站点中使用它。我复制并粘贴了你的第二个代码，仍然没有为我工作…太奇怪了…+1虽然…@Jerry-对不起，我忘了我在测试中添加了

位置：relative

。那是你的问题。更新我的答案以反映它。很好！！！。。。谢谢！！！！我想知道添加position的原因：relative…：我不明白如果没有

position

，它应该如何在任何地方工作<代码>顶部不应影响未定位的元素。

#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;
}