2010-07-11 8 views
1

J'essaye d'animer un div lorsque l'utilisateur clique sur le bouton. Chaque bouton déplace un div vers un nombre de pixels différent. Mon code fonctionne dans firefox et chrome mais pas IE8 (je l'ai seulement testé dans IE8 jusqu'à présent). J'apprécie que quelqu'un puisse m'aider à ce sujet.L'animation jQuery ne fonctionne pas dans IE

mon 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 */ 

mon 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> 

partie de CSS

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

Répondre

2

Si vous ajoutez à votre style position:relative cela fonctionne dans IE8.

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; 
}​ 
+0

Merci patrick.hide() est à des fins de test, je ne vais pas l'utiliser dans mon site réel. copier et coller votre deuxième code, ne fonctionne toujours pas pour moi ... si bizarre ..... + 1 si .. – FlyingCat

+0

@Jerry - Désolé, j'ai oublié que j'avais ajouté 'position: relative' à mes tests. – user113716

+0

Nice !!! ... Merci beaucoup !!!! me demandais la raison d'ajouter la position: relative ....: D – FlyingCat

1

je devais ajouter un peu de positionnement à la classe breakline pour l'obtenir pour animer au lieu de simplement cache.

ajouter position: relative à la classe #breakline css

+0

Placer la fonction en dehors '.ready()' ne changerait rien. – user113716

+0

merci pour la réponse, mais toujours ne fonctionne pas ... :( – FlyingCat

+0

Merci beaucoup .... +1 – FlyingCat