L'opacità animata non funziona correttamente su IE

Question

Sto provando a utilizzare animate() per modificare l'altezza e l'opacità di div. Il div ha uno sfondo di immagine in CSS. Funziona bene su Firefox e Safari, ma quando lo collaudo in IE lo sfondo viene rimosso. Questo è il mio codice:

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

Come posso risolvere questo problema?

Answer 1

Ho avuto l'impressione che jQuery abbia fatto tutto il supporto per l'opacità per te. Funziona per tutti i browser?

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

Answer 2

Usi alcuni script pngfix? quello potrebbe essere il colpevole.

Answer 3

È possibile utilizzare fadeTo per compiere ciò che si vuole fare:

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

fadeIn e fadeOut fare transizioni da 0 a 100%, ma quanto sopra vi permetterà di dissolvenza per un'opacità arbitraria.

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

Answer 4

Ho avuto lo stesso problema. Mi sono imbattuto in risposta, quando ho impostato l'opacità al 40%:

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

ho notato che ha fatto il salto opacità al 100%, quindi animate fino al 40%. Eureka.

Così, ora ho impostare in modo esplicito l'opacità a zero prima che l'animazione:

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

che anima senza problemi, tranne che il testo sembra ancora orribile in IE.

Per pulire il testo, ho rimosso l'opacità dal css in IE dopo l'animazione. Questo sembra chiarire abbastanza bene il testo in IE6 e 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:''}); 
     } 
    }); 
}); 

Lo sto testando su un Mac in Parallels, in IE6 e IE8. Tutto sembra funzionare bene sul lato Mac.

Answer 5

Non è necessario scrivere un gestore speciale per IE, jQuery fa tutto per voi dietro le quinte:

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

TUTTAVIA: Se si dispone di un PNG a 24 bit trasparente come immagine di sfondo che sta scomparendo, è necessario essere consapevoli del fatto che non è possibile combinare filter: alpha (che jQuery utilizza correttamente dietro le quinte di IE) con un PNG trasparente a 24 bit in IE7 o IE8.Credo che l'unico modo intorno ad esso è quello di impostare un colore di sfondo (diverso transparent) sull'oggetto su cui si sta utilizzando filter: alpha

Come testare: È sufficiente impostare un colore di sfondo su #list_box ad un colore solido con l'aggiunta di qualcosa di simile al vostro CSS dopo tua dichiarazione background-image:

#list_box { background-color: red } 

Se l'immagine di sfondo rimane, e la vostra anima #list_box correttamente (tranne che per lo sfondo orribile) si sa che cosa è il problema e dovrà f Ind in un altro modo per realizzare ciò che vuoi.

Answer 6

In jQuery, una volta che il div è impostato per avere sia l'opacità: 0 (in Standard Conforme browser) o un filtro: alpha (opacità = 0) in IE, si può semplicemente utilizzare

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

Dal jQuery supporta il supporto cross-browser, se finisci per animare il filtro tramite IE, quindi è probabile che jQuery stia cercando di supportare IE e il conflitto arriva quando jQuery attiva la modifica dell'opacità x2.

Spero che questo aiuti. Ho avuto lo stesso problema, oltre a problemi dispari con IE non essere in grado di gestire la dissolvenza su una pila div con più elementi in essa contenuti.

Answer 7

Molto (molto) in ritardo con la risposta, ma poiché questo è in cima a Google quando ho cercato aiuto con un problema di jquery v animato in IE8 ho pensato di pubblicarlo qui.

Il mio problema è stato collegato al bug hasLayout in IE e l'aggiunta di "display: inline-block" all'elemento da sbiadire ha risolto il problema.

Answer 8

Ok questo potrebbe aiutare un po ', ho trovato una soluzione in questo sito circa il problema esatto http://blog.bmn.name/2008/03/jquery-fadeinfadeout-ie-cleartype-glitch/

In conclusione, il problema generale è il filtro di opacità su IE, nel vostro caso specifico non c'è molto che si può fare, pensato

ma in caso di dissolvenza in entrata e in uscita, prevenire il problema con un'immagine di sfondo png è sufficiente rimuovere l'attributo di filtro la funzione jQuery aggiunta alla fine di fx. Basta usare una funzione di callback, una cosa del genere avrebbe fatto:

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

nel caso in cui si selettori restituisce più di uno, utilizzare la ciascuna funzione, qualcosa di simile:

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

Answer 9

Ho avuto lo stesso tipo di questo:

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

Ho semplicemente aggiunto float: a sinistra; al #nav li css e ha risolto il problema.

Answer 10

Ive ha avuto lo stesso problema con IE 7, il problema era una virgola finale dopo che la proprietà di opacità

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

Deve essere:

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

Answer 11

ho trovato una soluzione che ha funzionato per me: position:inline-block; Questo funziona per dissolvere l'opacità del testo, non l'ho provato con un'immagine di sfondo CSS. Forse aiuta comunque.

Volevo solo segnalare un piccolo bug con il metodo fadeTo in Internet Explorer 8. Non funzionerà se il tuo elemento come "display" è impostato su "in linea". Ho scoperto che è necessario metterlo in "blocco in linea" e quindi funziona perfettamente. Non c'è nulla su questo sul web e non è la prima volta che ho questo problema.

Non so se è il modo giusto per segnalare questo problema, ma sono sicuro che qualcuno leggerà questo post :)

trovato alla http://www.devcomments.com/IE-8-fadeTo-problem-with-inline-elements-to65024.htm

Answer 12

stesso problema con IE8. Aggiunta di "display: inline-block" a .hover2 nel problema risolto.

$(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); 
             } 
         ); 
       } 
    ); 

Answer 13

Ho notato che il problema era causato dalla posizione: relativa del contenitore. Se il "passaggio" all'animazione di opacità assoluta funzionerà.

Answer 14

ho risolto con l'aggiunta di uno sfondo opaco con l'elemento di animazione:

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

Lavori per l'IE7-8

Spero che questo aiuti qualcuno;)