examples - jQuery slideToggle salta alrededor
jquery pdf (18)
Tuve el mismo problema con .slideToggle , y BenAdler tiene razón. Pon todo lo que quieras para alternar en un div, y establece el estilo para el div en algo que contenga overflow:hidden y position: relative . Funcionará bien después de eso.
Estoy usando la función jQuery slideToggle en un sitio para revelar "más información" sobre algo. Cuando disparo la diapositiva, el contenido se revela gradualmente, pero se encuentra a la derecha en unos 100 píxeles hasta el final de la animación cuando salta repentinamente a la posición correcta. Yendo para otro lado, el contenido salta justo en la misma cantidad justo antes de que comience su animación ''ocultar'', luego se oculta gradualmente.
Ocurre en IE7 / 8, FF, Chrome.
¿Alguna idea sobre cómo arreglaría esto?
Gracias por adelantado.
Esto es solo una toma en la oscuridad, pero si la función está manipulando la propiedad css de altura de su elemento (s), de acuerdo con este sitio debe separar el relleno y mostrar: ninguno en su CSS para evitar que salte
Intente jugar con cómo se posiciona / muestra / flota el elemento. He tenido problemas similares que se resolvieron jugando con esos ajustes.
He encontrado una solución alternativa, pero todavía no estoy seguro de los detalles. Parecía que cuando jQuery agregaba el estilo ''overflow: hidden'', el efecto que un elemento flotante cercano había cambiado. La solución consistía en colocar un "desbordamiento permanente: oculto" en el div deslizado con diapositiva, y también un margen negativo-izquierda para contrarrestar el efecto.
Me sorprende que cambiar el valor de desbordamiento tenga tal efecto en el diseño, pero ahí lo tiene ...
¿Su documento contiene alguna declaración DOCTYPE? Sin él, algunos navegadores visualizan la página en modo "quirck", lo que no siempre lleva al resultado esperado.
ver aquí
Para asegurarse de que su página se muestre como se esperaba, agregue la siguiente declaración en la parte superior de la página (es decir, antes de la etiqueta html).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
He encontrado el mismo error, lo resolví posicionando el elemento con la position: relative; width: 709px; position: relative; width: 709px; El ancho fijo hizo el truco.
establecer el alto / ancho del componente que desea deslizar corrige un error que causa "jumpyness" usando una línea como ( referencia ):
$(''#slider'').css(''height'', $(''#slider'').height() + ''px'');
Este es un problema antiguo, pero aún existen problemas similares, debajo de una solución de trabajo con un par de requisitos más.
Tenía exactamente el mismo problema pero solo cuando el elemento oculto era un <div> . Intenté todo en esta página, pero lo único que funcionaba era utilizar overflow:hidden; .
Pero el problema con el uso de overflow:hidden; es que el espaciado superior e inferior creado por el elemento de párrafo se eliminó repentinamente, lo que hizo que el diseño fuera feo.
Cambié mi elemento oculto de un <div> a un <p> y eliminé el overflow:hidden; ... funcionó sin estropear el diseño y el problema de salto no regresó.
EDITAR:
En un sitio nuevo estaba decidido a usar un <div> oculto y descubrí algunas cosas sobre este tema ...
1) Cuando div contiene p o ul o similar, ocurre el salto.
2) Cuando el div solo contiene texto, enlaces y / o imágenes, sin animación saltadora.
3) Eliminar todos los márgenes y el relleno de los elementos dentro de la div oculta aclara el problema. Se pueden agregar otras cosas como saltos de línea para compensar la falta de relleno y márgenes ... no es ideal, pero la animación vuelve a ser suave.
Accidentalmente, creo que la solución más fácil de usar es agregar una función personalizada a jQuery con relleno / margen superior / inferior de animación también.
//this function is to avoid slideToggle jQuery jump bug.
$.fn.slideShow = function(time,easing) { return $(this).animate({height:''show'',''margin-top'':''show'',''margin-bottom'':''show'',''padding-top'':''show'',''padding-bottom'':''show'',opacity:1},time,easing); }
$.fn.slideHide = function(time,easing) {return $(this).animate({height:''hide'',''margin-top'':''hide'',''margin-bottom'':''hide'',''padding-top'':''hide'',''padding-bottom'':''hide'',opacity:0},time,easing); }
Y el ejemplo de uso:
$(this).slideShow(320,''easeOutQuart'');
$(this).slideHide(320,''easeOutQuart'');
Mi ejemplo de opacidad animada alternar tu, puedes modificarlo como lo necesites.
puedes usar una estructura como esta:
<div class="details">
<div class="hidden"> [your toggled info] </div>
</div>
y en tu css
.details{
position:relative;
}
.hidden{
display:none;
}
Creo que eso es todo.
su llamada jquery debe ser:
$(''.hidden'').slideToggle("slow");
Lo único que me ayudó: dar el contenido para desplazarse por un ancho.
tuvo el mismo problema, encontró un problema tal vez alguien más lo tuvo.
si tiene altura mínima -> entonces tiene un problema con slideToggle
Solo para compartir una solución que funcionó para mí.
Estoy usando un diseño receptivo para un sitio en el que estoy trabajando y, básicamente, uso slidetoggle en una de mis columnas en mi diseño, la única solución que funcionaba anteriormente era establecer un ancho fijo para mi contenido, sin embargo, como el ancho de las columnas es dinámico, esto es no es una solución para mí
Envolver el contenido que quería alternar en un <div> extra y luego usar la barra deslizante en el nuevo div parecía ser el truco. Intente agregar position:relative al elemento original que estaba tratando de deslizar.
Sí, esto agrega un marcado innecesario pero es la única forma en que puedo hacer que funcione.
Tuve el mismo problema, pero overflow: hidden y position: relative no tuvo efecto. Puse el margen inferior: -10px en el elemento que estaba alternándose, y resolvió el problema.
Resuelto al agregar a la división conmutada:
overflow: hidden; position: relative;
Tuve este problema cuando uso elementos flotantes dentro del elemento que está alternado. Establecer un ancho del 100% contra el elemento conmutado lo solucionó. Si desea usar relleno, también puede establecer el tamaño de la caja en el borde de la caja.
No es necesario el posicionamiento relativo, pero es posible que desee utilizar el desbordamiento: oculto para borrar los elementos flotantes.
La adición de propiedades de transición / transformación de CSS3 siempre resolvió cualquier problema de salto con slideToggle ... Ejemplo:
-webkit-transform-origin: top;
-moz-transform-origin: top;
-ms-transform-origin: top;
-o-transform-origin: top;
transform-origin: top;
-webkit-transition: transform 0.26s ease;
-moz-transition: transform 0.26s ease;
-ms-transition: transform 0.26s ease;
-o-transition: transform 0.26s ease;
transition: transform 0.26s ease;
transition: -webkit-transform 0.26s ease;