example - slider jquery

jQuery slideDown Snap Back Issue

Question

Tengo el mismo problema sobre el que estoy leyendo en toda la web, aunque no puedo encontrar la solución.

En pocas palabras, cuando uso el método slideDown () en mis elementos DIV, obtengo ese efecto de retroceso feo donde jQuery desliza el tamaño DIV demasiado y luego vuelve a su tamaño real de una manera fea.

Mirando por la web, intenté eliminar todos los márgenes y el relleno de los elementos ofensivos, pero no hace nada.

No puedo establecer tamaños estáticos para los div porque cada uno cambiará en la carga de la página. Una cargada aunque no cambiarán. (los nuevos divs también se crean usando ajax)

Heres una muestra DIV

<div class="response hidden new">  
<div class="right"><span class="responseTime">10:28:10 AM</span></div>  
<span class="responseUser">Someone</span><br> 
<span class="responseMessage">sdgs sdgh</span>
</div>

y el CSS

div.response {
line-height: 20px;
border-bottom: 1px dotted #546268;
}

.responseMessage {display: block}

¿Puede alguien ayudarme aquí? Estoy fuera de ideas. Iv intentó usar jQuery para calcular la altura del DIV primero, luego forzar la altura usando CSS () antes de llamar a slideDown (), pero jQuery casi siempre estaba equivocado acerca de la altura ...

El div de respuesta también se oculta usando la propiedad display: none.

Esta función es entonces llamada en ella.

function quickResponse(time, user, message, epoch) {
    $(''.latestStar'').remove();
    addResponse(time, user, message, epoch);
        $(''.new'').slideDown(500).removeClass(''hidden'');
    $(''html, body'').animate({ scrollTop: ''0px''}, 1000, function() {
    });     
}

Editar . Olvidé mencionar que si el div solo contiene 1 palabra, el efecto de retroceso no ocurre ... pero si escribo varias palabras con espacios, sucede ...

Es casi como agregar espacios hace que la altura se arruine.

Answer 1

Añadiendo el CSS clear: both resolvieron el problema por mí, aunque no tengo idea de por qué.

Edición: Agregar overflow: hidden me dio un contenedor en blanco con la altura adicional no deseada.

Answer 2

Agregue overflow: hidden css overflow: hidden al elemento que desea deslizar hacia abajo.

Por alguna razón esto solucionó mi problema de retroceso.

EDITAR: Las cosas que confunden a jquery sobre la altura de un elemento causarán el problema de recuperación.

1. El relleno lo causará. Coloque el contenido acolchado que desea deslizar hacia abajo en un nuevo div padre sin relleno, y en su lugar, deslice ese div.
2. El texto en línea que se ajusta debido al ancho lo causará. Agregue white-space: pre o white-space: nowrap para resolverlo.

Answer 3

Cualquiera de las soluciones anteriores no funcionó para. Solucioné el problema agregando los siguientes estilos a mi contenedor:

.clear:after {
   clear: both;
}

.clear:before,
.clear:after {
   display: table;
   content: "";
}

Answer 4

Echa un vistazo a las correcciones:
1. SlideDown Animation Jump Revisited
2. Arreglando el efecto de salto slideDown () de jQuery

También ese mismo fallo documentado (con arreglo) en el sitio web de jQuery: http://docs.jquery.com/Tutorials:Getting_Around_The_Minimum_Height_Glitch

Y trate de agregar el siguiente código antes de su código (en la carga del documento):

$(''.new'').css(''height'', $(''.new'').height());
$(''.new'').hide();

De esta manera, establecerá la altura explícitamente, y asegúrese de mostrar su div inicialmente, el código anterior lo ocultará más tarde, porque creo que no podrá establecer la altura correcta en el div oculto, aunque puede intentarlo. Buena suerte ~

Answer 5

Estaba teniendo el problema de retroceso en el deslizamiento en un elemento LI que estaba agregando a un UL. No había nada especial en eso, así que lo encontraba desconcertante (y lo había visto antes, pero no recordaba cómo lo había arreglado en ese momento).

En mi caso, la única solución que necesitaba era especificar un ancho en mi LI y fue capaz de deslizar hacia abajo () y deslizar hacia arriba () sin problemas.

p.ej

ul li {ancho: 100%; }

Recibí este consejo de uno de los enlaces publicados por @arman-p (lo que sugiere que agregar un ancho al elemento puede solucionar este problema, lo que hizo en mi caso).

Answer 6

Otra cosa que podría causar esto es si tiene un estilo de "transición" en el elemento en sí.

Un ejemplo de lo que me estaba pasando.

* {
     transition: .3s;
}

.dropdown {
     /* Fix - Remove Transition */
     transition: 0s;
}

Answer 7

También estaba recibiendo ese efecto de retroceso feo.

Lo que me solucionó el problema de volver a colocar era aplicar un ancho css al div al que está aplicando la función de deslizamiento.

Answer 8

Tengo una base de datos cargando imágenes que están todas configuradas en el mismo ancho, pero algunas de ellas tienen diferentes alturas y tenía un problema con esto. Lo que lo arregló para mí fue simplemente lanzar un setTimeout alrededor de la parte deslizante de mi código.

setTimeout(function(){$("#YOURDIV").slideDown("slow");}, 1);