jQuery utilisant .animate() ne parvient pas à faire quoi que ce soit dans IE8

Donc, c'est officiel: je déteste Internet Explorer. Oui, toutes les versions sanglantes de celui-ci. :-DjQuery utilisant .animate() ne parvient pas à faire quoi que ce soit dans IE8

Donc, je ne pensais pas que je faisais quelque chose de compliqué ici, mais apparemment je le suis. J'ai un tas d'éléments de liste dans une liste non ordonnée de style pour un menu de navigation, et dans Firefox, Chrome, Safari et Opera, les choses fonctionnent bien. Ce qui est supposé arriver, c'est quand vous passez un objet de navigation, il devrait animer un peu de croissance et animer un changement de couleur d'arrière-plan.

Rien ne se passe dans Internet Explorer 7/8.

Je pense que c'est juste lié à la fonction animée, puisque si je change .animate avec .css, cela fonctionne.

http://project-cypher.net/wtf/ (* url supprimé - problème résolu)

Idées?

Source

2010-03-26 Cypher

Teh codez semble être ceci: http://pastebin.com/zjmrS9wJ –

'Alors, c'est officiel: je déteste Internet Explorer. Oui, toutes les versions sanglantes de celui-ci. Qu'est-ce qui t'a pris autant de temps? –

@ Lucas Jones: Oui, c'est le javascript qui accroche l'événement hover et anime l'élément d'ancrage. Est-ce que j'ai raté quelque chose ou avez-vous soumis une correction à ce que j'ai écrit? – Cypher

Changer vos propriétés d'animation un peu en utilisant backgroundColor, paddingTop et paddingBottom, cela devrait fonctionner:

$('ul.navigation li a').css('padding','0px 12px'); 
$('ul.navigation li a').hover(function() { 
    $(this).stop().animate({ 
     backgroundColor : '#336699', 
     'padding-top': 6, 
     'padding-bottom': 6 
    }, 150); 
}, function() { 
    $(this).stop().animate({ 
     backgroundColor: '#660000', 
     paddingTop: 0, 
     paddingBottom: 0 
    }, 150); 
});

Ce CSS:

ul.navigation li a { 
    padding: 6px 12px; 
    color: #fff; 
    text-decoration: none; 
    background: #600; 
}

Source

2010-03-26 23:55:09

Merci, ça me rapproche. La couleur d'arrière-plan se fond maintenant dans et hors comme il se doit. Le rembourrage ne s'applique toujours pas ... J'ai essayé comme vous l'avez écrit, j'ai aussi essayé d'encapsuler la valeur dans des guillemets simples ... jusqu'ici rien. – Cypher

Cypher - Seulement dans IE8? J'ai testé, travaillant ici dans IE8 ... –

@Nick - Oui, pas de dés dans IE7/8, bon dans d'autres navigateurs. J'utilise jQuery 1.4.2. Je ne me souviens pas de la version du plugin de couleur qui remplace .animate(), mais j'ai téléchargé il y a quelques jours. Peut-être que je vais essayer de saisir une copie fraîche, non-minifiée ... – Cypher

Si je change le 'padding': '6px 12px' à 'padding': '12px' cela semble fonctionner. Pouvez-vous essayer cela et signaler si cela ne fonctionne pas de votre côté?

Ce n'est pas parfait mais cela fait quelque chose et vous rapproche un peu plus de la solution.

EDIT: Dang, je me demande pourquoi pas. Travaillé ici. IE8. IDK, peut-être que vous avez la solution de l'autre réponse.

Source

2010-03-26 23:55:08 jcolebrand

Hrm, cela ne semble pas fonctionner dans IE8. N'a pas testé dans 7 ...:) – Cypher

je suis tombé sur ce problème moi-même, l'autre jour. Je ne pouvais pas comprendre pourquoi IE n'a pas correctement animé les objets.

La réponse est simple, cependant: utiliser jQuery UI

jQuery UI comprend un plug-in de couleur amélioré qui fonctionne réellement.

Découvrez les autres choses dans jQuery UI pendant que vous y êtes soigné - boutons, dialogues, barres de progression, onglets, etc.

Source

2010-03-27 03:29:27

Belle prise. Vraiment n'avait rien à voir avec ça, mais merci quand même. – Cypher

C'est le cas. jQuery UI a un plugin de couleur qui permet d'utiliser backgroundColor dans 'animate'. –

jQuery utilisant .animate() ne parvient pas à faire quoi que ce soit dans IE8

Répondre

Questions connexes