animate() ne fonctionne pas dans Internet Explorer

Question

J'ai un script qui lorsque le bouton est survolé va l'animer de sorte qu'il apparaît, malheureusement je ne peux pas le faire fonctionner dans IE. Il utilise jQuery et fonctionne dans tous les autres navigateurs.

S'il vous plaît voir le violon: http://jsfiddle.net/JHS5g/1/ J'ai essayé d'imiter mon code réel autant que possible et ont donc laissé dans une partie du code environnant.

$("#main-nav div").hover(function() { 
    $(this).stop().animate({ 
    top: "-40px" 
    }, { queue: false, duration: 200 }); 
}, function() { 
    $(this).stop().animate({ 
    top: "0px" 
    }, { queue: false, duration: 200 }); 
}); 

je pense que c'est une erreur html ou css des thats la casser parce que quand je teste le code jquery sur son propre cela fonctionne, mais je ne peux pas mettre le doigt dessus.

J'ai remarqué que le violon est une des balises html en rouge, indiquant une erreur? mais encore une fois je ne peux pas le voir.

Merci à l'avance pour toute aide

Answer 1

Vous pouvez obtenir de travailler en ajoutant display: inline-block à la div vous animez

J'ai mis à jour votre JS Fiddle

Answer 2

Retirez le jQuery. Ce que vous essayez de faire est extraordinairement simple en CSS en utilisant une propriété CSS :hover psuedoclass de base et transition CSS.

La meilleure partie? Il fonctionnera même dans les anciennes versions de IE (jusqu'à IE7 - avant que :hover ne fonctionnera pas sur les éléments qui ne sont pas <a>), bien qu'il ne sera pas animer dans IE8 ou ci-dessous. Cela ne pose aucun problème, car les transitions ne sont pas des fonctionnalités et ne sont donc pas nécessaires. De plus, il offre un petit bonus aux personnes suffisamment intelligentes pour ne pas désactiver Windows Update.