l'opacité de jQuery animate ne fonctionne pas correctement sur IE

Question

J'essaie d'utiliser animate() pour changer la hauteur et l'opacité d'un div . La div a un fond d'image en CSS. Cela fonctionne bien sur Firefox et Safari, mais lorsque je le teste dans IE, l’arrière-plan est supprimé. Ceci est mon code:

 if (jQuery.support.opacity) {
    jQuery('#list_box').animate({opacity: '1',height: '300px',top: newTop},{duration: 300});
} else {
    jQuery('#list_box').animate({filter: 'alpha(opacity=100)',height: '300px',top: newTop},{duration: 300});
}
 

Comment puis-je résoudre ce problème?

Answer 1

J'avais l'impression que jQuery a fait tout le support d'opacité pour vous. Est-ce que cela fonctionne pour tous les navigateurs?

 $('#list_box').animate({opacity: '1',height: '300px',top: newTop},{duration: 300});
 

Answer 2

Vous n'avez pas besoin d'écrire un gestionnaire particulier pour IE, jQuery fait tout cela pour vous dans les coulisses:

jQuery('#list_box').animate({opacity: '1',height: '300px',top: newTop}, 300);

CEPENDANT: Si vous avez une 24 bits au format PNG transparent que votre image de fond qui est en train de disparaître, vous devez être conscient que vous ne pouvez pas combiner filter: alpha (jQuery qui utilise correctement derrière les scènes dans IE) avec un 24 bits au format PNG transparent dans IE7 ou IE8. Je crois que le seul moyen de contourner cela est de définir une couleur d'arrière-plan (autres que transparent) sur l'objet sur lequel vous utilisez filter: alpha

Comment tester: il suffit de définir une couleur d'arrière-plan sur #list_box d'un solide de couleur en ajoutant quelque chose comme ceci à votre CSS après votre background-image déclaration:

#list_box { background-color: red }

Si l'image d'arrière-plan reste, et votre #list_box anime correctement (sauf pour le hideux arrière-plan), vous savez quel est le problème et devra trouver un autre moyen pour accomplir ce que vous voulez.

Answer 3

Très (très) tard avec la réponse, mais comme c'est au sommet de Google quand j'ai cherché de l'aide avec un problème d'animation jQuery v dans IE8, j'ai pensé le poster ici.

Mon problème était lié au bogue hasLayout dans IE et l'ajout de "display: inline-block" à l'élément à atténuer a corrigé le problème.

Answer 4

J'ai eu le même genre de problème avec ceci:

 $('#nav li').hover(function() {
 $(this).stop().animate({opacity: '0.4'}, 'slow');
},
function() {
 $(this).stop().animate({opacity: '1'}, 'slow');
});
 

J'ai simplement ajouté float: left; #nav li css et le problème a été résolu.