javascript - left - ¿Cómo arreglas el parpadeo que ocurre cuando usas slideToggle en jQuery?
jquery slidetoggle (10)
Tengo una lista desordenada simple que quiero mostrar y ocultar al hacer clic usando el efecto jQuery slideUp y slideDown. Todo parece funcionar bien, sin embargo, en IE6 la lista se deslizará hacia arriba, parpadeará durante una fracción de segundo y luego desaparecerá.
¿Alguien sabe de un arreglo para esto?
¡Gracias!
Solo deja que IE6 parpadee. No creo que valga la pena invertir tiempo en un navegador moribundo cuando su funcionalidad básica funciona lo suficientemente bien. Si le preocupa el parpadeo por motivos de accesibilidad, simplemente busque el IE6 y reemplace la animación con un show genérico () y hide () en su lugar. Recomiendo evitar código complicado para casos extremos que no importan.
$(document).ready(function() {
// Fix background image caching problem
if (jQuery.browser.msie) {
try {
document.execCommand("BackgroundImageCache", false, true);
} catch(err) {}
}
};
La solución de Oli solo parece aplicarse a fondos parpadeantes, que no es el caso aquí.
El consejo de Ryan McGeary es sólido, excepto cuando el cliente / su jefe exige absolutamente que IE6 no actúe como si tuviera el síndrome de alcoholismo fetal.
Encontré la solución aquí: Deslice los errores de efecto en IE 6 y 7 desde la versión 1.1.3
Se agregó una declaración de tipo de documento en la parte superior del archivo (¿por qué no estaba allí antes ?, ¿quién sabe?) Y el parpadeo desapareció para no volver a verse nunca más.
Disculpas por el comentario adicional (no puedo votar ni comentar la respuesta de Pavel), pero al agregar un DOCTYPE solucioné este problema, y los efectos de deslizamiento hacia arriba / abajo / alternar ahora funcionan correctamente en IE7.
Vea A Apart Apart para obtener más información sobre DOCTYPES, o puede intentar especificar el 4 / Transitional bastante indulgente:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Publiqué una solución de solución rápida en http://blog.clintonbeattie.com/how-to-solve-the-jquery-flickering-content-problem/
En resumen, agregue desbordamiento: oculto al elemento contenedor en el que está deslizando hacia adentro / hacia afuera. ¡Espero que esto ayude!
Por lo que he escuchado y probado (incluyendo las otras sugerencias aquí) todavía hay situaciones en las que el parpadeo continuará siendo notable, especialmente cuando no tienes la opción de salir fácilmente del modo peculiar. En mi caso, tuve que permanecer en el modo peculiar por el momento y las otras sugerencias todavía no solucionaron el problema para mí. Terminé agregando un poco de solución hasta que finalmente podemos salir del modo peculiar:
//Start the slideUp effect lasting 500ms
$(''#element'').slideUp(500);
//Abort the effect just before it finishes and force hide()
//I had to play with the timeout interval until I found one that
// looked exactly right. 400ms worked for me.
setTimeout(function() {
$(''#element'').stop(true, true).hide();
}, 400);
Este código no depende del navegador (no hay detección de navegador), funciona bien y reproduce el comportamiento del método .slideUp
$("#element").animate({
height: 1, // Avoiding sliding to 0px (flash on IE)
paddingTop: "hide",
paddingBottom: "hide"
})
// Then hide
.animate({display:"hide"},{queue:true});
Tuvimos el mismo problema hoy. ¡No solo en IE6, sino también en IE8! Lo arreglé escondiendo el div algo antes , usando un tiempo de espera:
var pane = $(''.ColorPane'');
var speed = 500;
window.setTimeout(function() { pane.css(''display'', ''none''); }, speed - 100);
pane.slideUp(speed);
Espero que ayude a algunos de ustedes por ahí.
No sé si alguien leerá esta respuesta, pero aquí hay una solución para aquellos que, como yo, no pueden agregar un tipo de documento a la página (gracias las plantillas predeterminadas de Sharepoint 2007) sin pasar unos días en una revisión de plantilla completa.
En un documento sin DOCTYPE, el parpadeo se produce cuando la altura de un elemento llega a 0. Por lo tanto, la solución que he encontrado es animar mis elementos a una altura de 1px, en lugar de 0.
Me gusta esto:
$(".slider").click(function (e) {
$(this).animate({"height" : "1px"});
});
Espero que ayude
NB: no olvide que para deslizar el elemento hacia abajo, tiene que almacenar previamente su altura inicial de alguna manera (propiedad de nodo, hack de atributo rel, etc.).
Estoy trabajando con un carrusel que tiene una copia marcada en algunas diapositivas de fondo. La transición de deslizamiento es un fundido. Todo está bien hasta ahora.
Pero algunas partes de la copia se desvanecen después de que se cargue la diapositiva. Y luego se desvanece justo antes de la transición de diapositiva. Esta copia, una lista desordenada de enlaces ( UL > LI*2 > A ), se desvaneció sobre el fondo de la diapositiva. Esto también está bien en todos los navegadores, excepto en IE . IE tenía un fondo parpadeante en el UL.
Lo que sucedía es que se estaban ejecutando dos fade-ins simultáneos: la imagen de fondo en la diapositiva y la UL. Utilicé la función setTimeout de creación de prototipos de sergio para ejecutar el fadeIn UL () después de que la diapositiva había terminado de cargarse. Luego, llamé a otro setTimeout para hacer la transición de deslizamiento justo después del fadeOut de UL ().
setTimeout es tu amigo al combatir el parpadeo de IE.