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

來源

2010-07-11 FlyingCat

：

添加位置。

http://jsfiddle.net/NPxt6/1/

#breakline 
{ 
    width:580px; 
    height:100px; 
    background-image:url('breakline.png'); 
    background-repeat:no-repeat; 
    float:left; 
    border:1px solid black; 
    position:relative; 
}

來源

2010-07-11 17:32:26 user113716

謝謝帕特里克.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

我有一些定位添加到特徵線類來得到它的動畫，而不是僅僅躲了起來。如果添加position:relative你的風格它工作在IE8相對於#breakline CSS類

來源

2010-07-11 17:22:58

配售之外的功能'。就緒（）'不會改變任何事情。 – user113716 2010-07-11 17:39:49

感謝您的回覆，但仍然無法正常工作... :( – FlyingCat 2010-07-11 17:46:35

非常感謝.... +1 – FlyingCat 2010-07-11 17:50:29

jQuery動畫在IE中不起作用

回答

相關問題