web-dev-qa-db-fra.com

L'animation de l'opacité ne fonctionne pas correctement sur IE

J'essaie d'utiliser animate() pour changer la hauteur et l'opacité d'un div. Le div a un fond d'image en CSS. Cela fonctionne bien sur Firefox et Safari, mais quand je le teste dans IE l'arrière-plan est supprimé. Voici 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?

javascriptjqueryinternet-exploreranimation
31
fidoboy

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});
17
Eric

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

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

CEPENDANT : Si vous avez un PNG transparent 24 bits comme image d'arrière-plan qui disparaît, vous devez être conscient que vous ne pouvez pas combiner filter: alpha (que jQuery utilise correctement en arrière-plan dans IE) avec un PNG transparent 24 bits dans IE7 ou IE8. Je pense que la seule solution consiste à définir une couleur d'arrière-plan (autre que transparent) sur l'objet sur lequel vous utilisez filter: alpha

Comment tester: Définissez simplement une couleur d'arrière-plan sur #list_box à une couleur unie en ajoutant quelque chose comme ça à votre CSS après votre background-image déclaration:

#list_box { background-color: red }

Si l'image d'arrière-plan persiste et que votre #list_box s'anime correctement (sauf pour l'arrière-plan hideux) vous savez quel est le problème et devrez trouver une autre façon d'accomplir ce que vous voulez.

16
Doug Neiner

Très (très) tard avec la réponse, mais comme c'est en haut de Google lorsque 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 résolu le problème.

5
katebp

J'ai eu le même problème. Je suis tombé sur la réponse lorsque j'ai défini l'opacité à 40%:

$('#list_box').stop().animate({opacity: '.4'},"slow");

J'ai remarqué que l'opacité était passée à 100%, puis animée à 40%. Eureka.

Donc, maintenant je mets explicitement l'opacité à zéro avant l'animation:

$('#list_box').css({opacity:0}).stop().animate({opacity: '1'},"slow");

Cela s'anime en douceur, sauf que le texte a toujours l'air horrible dans IE.

Pour nettoyer le texte, j'ai supprimé l'opacité du CSS dans IE après l'animation. Cela semble clarifier un peu le texte dans IE6 et IE8.

$('#list_box').css({opacity:0}).stop().animate({opacity: '1'},"slow",function(){
    //remove the opacity in IE
    jQuery.each(jQuery.browser, function(i) {
        if($.browser.msie){
            $('#list_box').css({opacity:''});
        }
    });
});

Je le teste sur un Mac dans Parallels, dans IE6 et IE8. Tout semble bien fonctionner du côté Mac.

5
user242190

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; au css #nav li et il a résolu le problème.

4
Hoxxy

Dans jQuery, une fois que le div est défini pour avoir l'opacité: 0 (dans les navigateurs conformes aux normes) ou le filtre: alpha (opacité = 0) dans IE, vous pouvez simplement utiliser

$ ('# div'). animate ({opacity: 1}, 100);

J'espère que ça aide. J'ai eu le même problème, plus des problèmes étranges avec IE ne pouvant pas gérer la décoloration sur une pile div avec plusieurs éléments en elle.

3
newfront

J'ai remarqué que le problème était dû à la position: par rapport au conteneur. Si le "passage" à l'animation d'opacité absolue fonctionne.

3
gleenk

J'ai trouvé une solution qui a fonctionné pour moi: position:inline-block; Cela fonctionne pour atténuer l'opacité du texte, je ne l'ai pas essayé avec une image de fond CSS. Peut-être que ça aide de toute façon.

Je voulais juste signaler un petit bogue avec la méthode fadeTo dans Internet Explorer 8. Cela ne fonctionnera pas si votre élément comme "display" est réglé sur "inline". J'ai trouvé que vous devez le mettre en "bloc en ligne", puis cela fonctionne parfaitement. Il n'y a rien à ce sujet sur le Web et ce n'est pas la première fois que j'ai ce problème.

Je ne sais pas si c'est la bonne façon de signaler ce problème, mais je suis sûr que quelqu'un lira ce post :)

trouvé sur http://www.devcomments.com/IE-8-fadeTo-problem-with-inline-elements-to65024.htm

2
xon1c

J'ai eu le même problème avec le IE 7, le problème était une virgule de fin après la propriété d'opacity

jQuery(this).animate({opacity:1.00,},800);

Ce doit être:

jQuery(this).animate({opacity:1.00},800);
2
jenses

Je l'ai résolu en ajoutant un fond opaque à l'élément animé:

CSS:

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 195px;
    height: 274px;
    cursor: pointer;
    background: #fff url('../images/common/image_hover.png') 0 0 no-repeat; /* the solution */
    opacity: 0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE8 */
    filter: alpha(opacity=0); /* IE6-7 */     
    zoom: 1;
}

JS:

$('.overlay').hover(
    function(){
        $(this).animate({'opacity': 0.7}, 300);
    },
    function(){
        $(this).animate({'opacity': 0}, 250);
    }
);

Fonctionne pour IE7-8

J'espère que cela aidera quelqu'un ;)

2
Kate

Vous pouvez utiliser fadeTo pour accomplir ce que vous voulez faire:

$('#list_box').fadeTo("slow", 0.33);

fadeIn et fadeOut font des transitions de 0 à 100%, mais ce qui précède vous permettra de passer à une opacité arbitraire.

( http://docs.jquery.com/Effects/fadeTo#speedopacitycallback )

1
Andy Mikula

Ok, cela pourrait aider un peu, j'ai trouvé une solution dans ce site sur le problème exact http://blog.bmn.name/2008/03/jquery-fadeinfadeout-ie-cleartype-glitch/

en conclusion, le problème général est le filtre d'opacité sur IE, dans votre cas spécifique il n'y a pas grand chose à faire, pensait

mais au cas où vous fader dedans et dehors, pour éviter le problème avec une image d'arrière-plan png, il vous suffit de supprimer l'attribut filter que la fonction jQuery a ajouté lorsque le fx se termine. Utilisez simplement une fonction de rappel, quelque chose comme ça le ferait:

$('#node').fadeOut('slow', function() {<br/>
    this.style.removeAttribute('filter');<br/>
});

dans le cas où vos sélecteurs retournent plus d'un, utilisez la fonction each, quelque chose comme ceci:

$('.nodes').fadeIn('fast',
    function() {
        $(this).each (
            function(idx,el) {
                el.style.removeAttribute('filter');
             }
        );
     }
);
1
y0ux

Même problème avec IE8. L'ajout de "display: inline-block" à . Hover2 a corrigé le problème.

$(function() {

        $(".hover1").css("opacity","1.0"); // Default set opacity to 1.0

        // On Mouse over
        $(".hover1").hover( 
                            function () {

                                        // SET OPACITY TO 15%
                                        $("span.hover2").stop().animate({opacity: 0.15}, 1200);
                                        },

                                        // ON MOUSE OUT
                            function () {

                                        // SET OPACITY BACK TO 100%
                                        $("span.hover2").stop().animate({opacity: 1.0}, 1200);
                                        }
                         );
                }
     );
1
Sidd

Utilisez-vous un script pngfix? c'est peut-être le coupable.

0
Olivvv