JQuery: animado() no funciona como se esperaba en el IE

Question

estoy volviendo loca con este IE 7 ...

==> hhttp: //neu.emergent-innovation.com/

¿Por qué la función siguiente no funciona en IE 7, pero funciona perfectamente con Firefox? ¿Hay algún error en la función animada?

function accordion_starting_page(){ 
    // hide all elements except the first one 
    $('#FCE-Inhalt02-ContentWrapper .FCE-Fade:not(:first)').css("height", "0").hide(); 
    $('#FCE-Inhalt02-ContentWrapper .FCE-Fade:first').addClass("isVisible"); 

    $('div.FCE-Title').click(function(){ 

     // if user clicks on an already opened element => do nothing 
     if (parseFloat($(this).next('.FCE-Fade').css("height")) > 0) { 
      return false; 
     } 

     var toHide = $(this).siblings('.FCE-Fade.isVisible'); 

     toHide.removeClass("isVisible"); 

     // close all opened siblings 
     toHide.animate({"height": "0", "display": "none"}, 1000); 

     $(this).next('.FCE-Fade').addClass("isVisible").animate({"height" : "200"}, 1000); 

     return false; 
    }); 
} 

Muchas gracias por su ayuda ...

---

Muchas gracias, esos eran grandes consejos! Desafortunadamente, todavía no funciona ...

El problema es que IE muestra el contenido de ambos contenedores hasta que finaliza la animación ... Firefox se comporta correctamente ... Pensé que era el problema del "desbordamiento: oculto" "- pero eso no cambió nada.

ya que probé el acordeón-plugin, pero se comporta exactamente de la misma ...

Answer 1

Como se ha dicho por Pablo, cuando se utiliza el método. El navegador de jQuery IE7 de Animate() no reconoce internamente la propiedad 'posición'. por ejemplo

regla CSS:

li p (bottom:-178px; color: white; background-color: # 4d4d4d; height: 100%; padding: 30px 10px 0 10px;) 

Implementación de la animación en jQuery:

$('li').hover(function(){ 

       $this = $(this); 

       var bottom = '-45px'; //valor default para subir. 

       if($this.css('height') == '320px'){bottom = '-115px';} 

       $this.css('cursor', 'pointer').find('p').stop().find('.first').hide().end().animate({bottom: bottom}, {queue:false, duration:300}); 

     }, function(){ 

     var $this = $(this); 

     var bottom = '-178px'; //valor default para descer 

      if($this.css('height') == '320px'){bottom = '-432px';} 

     $this.find('p').stop().animate({***position: 'absolute'***, bottom:bottom}, {queue:false, duration:300}).find('.first').show(); 

     });//fim do hover() 

Lo que funciona en todos los navegadores:

regla CSS:

li p (position: absolute; left: 0; bottom:-178px; color: white; background-color: # 4d4d4d; height: 100%; padding: 30px 10px 0 10px;) 

jQuery código:

$('li').hover(function(){ 

       $this = $(this); 

     var bottom = '-45px'; //valor default para subir. 

       if($this.css('height') == '320px'){bottom = '-115px';} 

       $this.css('cursor', 'pointer').find('p').stop().find('.first').hide().end().animate({bottom: bottom}, {queue:false, duration:300}); 

     }, function(){ 

     var $this = $(this); 

     var bottom = '-178px'; //valor default para descer 

      if($this.css('height') == '320px'){bottom = '-432px';} 

     $this.find('p').stop().animate({bottom:bottom}, {queue:false, duration:300}).find('.first').show(); 

     });//fim do hover() 

En mi caso se resolvió de esta manera.

Answer 2

No estoy seguro de cuál es el problema exactamente ... tal vez no se puede animar a "display: none"? Prueba esto:

toHide.animate({ height : 0 }, 1000, function() { $(this).hide(); }); 

... pensamiento, parece que puede haber algunas otras cuestiones con el contenedor no tener overflow: hidden conjunto sobre el mismo.

La mejor forma podría ser la de evitar tener que volver a inventar la rueda: el plugin jQuery UI tiene un acordeón incorporado. http://docs.jquery.com/UI/Accordion Estoy seguro de que el honorable Sr. Resig & Co ya se ha ocupado de cualquier error que pueda encontrar.

Answer 3

usted podría hacer uso del selector de jQuery: Visible en lugar de alternar la clase isVisible.

también la animación parece funcionalmente lo mismo que slideUp (1000).

Answer 4

que tenía un problema recientemente donde animado() no estaba funcionando como se esperaba y se había reducido a la prestación de IE mi relleno de css: propiedades de forma diferente a Firefox.

Esto parece haber sucedido a otras personas, y tuve que cortar alrededor en mi css; utilizando márgenes y anchos fijos y otros horribles hacks de IE, en su lugar.

Answer 5

me encontré con un problema similar con la función animado y se sorprendió cuando se estaba mostrando el error procedente de la biblioteca central de jQuery. Sin embargo, jQuery está bien, su IE es lo que necesita atender.

Al animar cualquier atributo de un elemento en IE, debe asegurarse de que en su CSS haya un punto de partida para el atributo que va a alterar. Esto también se aplica a Safari.

A modo de ejemplo, mover un div continuamente hacia la izquierda,

JQuery:

var re = /px/; 
var currentLeft = $("#mydiv").css('left').replace(re,'') - 0; 
$("#mydiv").css('left',(currentLeft-20)+'px'); 

CSS:

#mydiv { position: absolute; top: 0; left: 0; } 

Si no ponen en una posición de partida & superior izquierda IE eventualmente lanzará un error.

Esperanza esto ayuda

Answer 6

Cambia la duración de IE. Poner el partido 1/10 de lo que lo haría en FF, y debe estar cerca de la misma conducta en ambos navegadores:

FF

$("#map").animate({"top": (pageY - 101) + "px"},{"easing" : "linear", "duration" : 200}); 

IE

$("#map").animate({"top": (pageY - 101) + "px"},{"easing" : "linear", "duration" : 20}); 

En caso de solucionarlo.

Answer 7

Esto podría estar fuera de tema, pero estoy jugando con JQuery y es genial, pero siendo nuevo en Javascript No me di cuenta de que IE 7 e IE 8 no reconocen la palabra clave const. Eso es lo que impedía que mi JQuery se ejecutara, no era un problema con la animación ... esperanza que podría ayudar a un alma desmelenada. hombre, no puedo esperar para volver a lo bueno de AS3 y Flex ..

ver http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/JSConstKeyword.html

para más

Answer 8

Después de un día de preguntarse ¿Por qué IE no se animará cosas he encontrado que algunas versiones de jQuery ya no hacen lo que se utilizan para:

este:

$('#bs1').animate({ 
    "left": bs1x 
}, 300, function() { 
    // Animation complete. 
}); 

no funcionará con este Jquery: https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js

pero funciona con: versiones https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js

Hooray viejos!