jQuery aliviar la animación de desplazamiento de la ventana de Firefox (mi error o mal?)

StackOverflow https://stackoverflow.com/questions/2097655

Pregunta

EL EJEMPLO
En primer lugar, aquí está mi código y problema:
http://www.nathanstpierre.com/MBX/showoff.html

EL NÚMERO
Así que lo que estoy viendo es al hacer clic en los botones de la izquierda, los rollos de la ventana para el encabezado correspondiente. En todos los navegadores, pero Firefox (incluyendo ... IE jadeo ) este es muy suave. Sin embargo, si se reduce la altura de la ventana, se vuelve suave en todos los equipos. Ya he intentado esto en varios equipos y en IE 7-8, Google Chrome, Safari y Firefox 3.5. He eliminado todos los bits de gráfico y el color de la página, por lo que aquellos que no son el problema. Me he librado de la barra lateral que te sigue, no es eso.

LA TEORÍA
Creo que el jQuery plugin de aliviar calcula la distancia que está la necesidad de ir, y luego se divide por el número de píxeles que necesita para moverse por unidad de tiempo determinado (digamos 300 píxeles de más de 30 milisegundos, por lo 10px / ms). Cada otro navegador parece ser capaz de hacer de esto una transición sin problemas, pero tal vez la granularidad proporcionada por evento de la ventana de desplazamiento no se comprime lo suficiente para Firefox para hacer de este una apariencia lisa? O tal vez estoy usando el plugin flexibilización mal, o la configuración incorrecta.

el código 

$("#sidenav a").click(function () {
        $("#sidenav a").animate({'color':'#6d6d6d'},{"duration":400});
        $(this).animate({"color":"#fff"},{"duration":400});
        clicktarget=$(this).attr("href");
        $("html, body").animate({scrollTop: $(clicktarget).offset().top},{"duration":300,"easing":"easeout"});
        return false;
      });

LA LÓGICA

Añadir un detector de eventos a cada una etiqueta en la sidenav onClick. Esto hará que la parte superior de desplazamiento (). Del elemento en el documento con el mismo ID que el atributo href de ese enlace, y luego animar desde el actual scrollTop a la parte superior de desplazamiento (). De ese elemento. La lógica es sólida, y funciona sin problemas en todos los navegadores Firefox SALVO ... por lo que yo puedo decir.

Sobre el motivo

¿Qué estoy haciendo mal? Es esto un error?

Gracias!

LA ACTUALIZACIÓN

Bueno, no puedo en buena conciencia elegir cualquiera de las respuestas que aquí se presenta, ya que ninguno de ellos realmente han dado una solución al problema, por lo que si usted está siguiendo este elija su favorito y la generosidad se destinará a la con el mayor número de votos.

El problema parece ser la forma en que Firefox a) hace que la transparencia y b) se ocupa de eventos de desplazamiento. Posiblemente con la potencia del procesador lo suficientemente esto es un no-problema, pero lo que me hace triste es que IE (de todos los navegadores) es capaz de hacer esto bien en hardware inferior. Voy a acercarme a Mozilla con el tema y ver si tienen algo que decir al respecto.

Para la edificación adicional, se proporcionan los siguientes sin cargo:

Con Transparencia
sin transparencia

EDIT: Entonces la pregunta ha sido contestada, pero ahora no puede elegirlo. Alguien sabe qué pasa con eso?

INFORME FINAL DE ACTUALIZACIÓN había pasado suficiente tiempo que me dejaron tener la parte posterior de recompensas, así que elegí la respuesta que era correcto. Se parece a una caja de sombra y algunos otros efectos causar algunos problemas de desplazamiento en Firefox por la forma en que presten. FF 4.0 + asas esta mejor, pero algunos equipos todavía tienen problemas. Esta es una gran cabezas para personas que implementan CSS3:. Prueba de la interacción en todos los navegadores y ver si los costes de funcionamiento son justificables

¿Fue útil?

Solución

Los malos resultados parece que es causada por la propiedad -moz-box-shadow, si se quita cualquier declaración de esta propiedad (o desactivarlos con Firebug) la animación de desplazamiento es mucho más suave.

Otros consejos

Por favor, intente jQuery 1.4. Eso parece el ser mucho más rápido, a continuación, jQuery 1.3.2.

Si necesita depurar este tipo de cosas, poner los archivos js sin comprimir en el código y utilizar Firebug con su perfil, para perfilar las funciones.

página es un poco pesado con los dos fondos (uno de ellos un png transparente ..)

El problema es con Firefox y / o máquina de manipulación de la animación. Marque la opción desplazamiento suave de Firefox ( Herramientas -> Opciones -> Avanzado -> General -> Usar desplazamiento suave ). Puede ser que sea la razón, si se comprueba fuera ...

Siempre que he intentado un efecto similar que he utilizado ScrollTo. tal vez eso le ayudará

ScrollTo Plugin

He tenido el mismo problema con FF 3.5 - sin duda se ve como un problema de representación. Si lo intenta nueva 3.6 será probablemente muy bien.

Yo estaba teniendo problemas con la coda de Doherty deslizador 2,0 por cierto.

Regards

Andrej

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top