example - ¡Basic jQuery slideUp y slideDown me vuelven loco!

slideup jquery example

Question

¡mis habilidades de jQuery son bastante buenas normalmente pero esto me está volviendo loco!

Es un acordeón bastante simple que he codificado desde cero. Usando jQuery 1.3.2 por lo que no debería haber ningún error de salto, pero básicamente si echas un vistazo al ejemplo:

http://www.mizudesign.com/jquery/accordian/basic.html

Estoy mostrando la altura para el div de destino a la derecha; si contiene texto, cree que es más corto de lo que es y salta. Si es una imagen, no hay problema.

No puedo entender dónde me estoy equivocando, obviamente está en CSS en alguna parte, pero he intentado con todos los sospechosos habituales, como la pantalla: bloque

¡Cualquier idea sería recibida con gratitud!

Atentamente, Chris

PD Por favor, perdona la naturaleza del código fuente, lo he arrancado de todo el proyecto en el que estoy trabajando, así que incluye algunos divs que realmente no necesitan estar allí.

Answer 1

Creo que el problema es que cuando se agrega relleno o margen, entonces salta, este fue el caso yo. tienes que animar el margen en la devolución de llamada

También "tenga en cuenta" que las tablas se comportan con errores con slideDown slideUp y más bien usan fadeIn fadeOut

Answer 2

Debo admitir que encontré mi propia solución dinámica ahora.

http://www.mizudesign.com/jquery/accordian/basic.html debería ser reparado.

En realidad, es muy simple: solo agrega la altura usando .css antes de ocultar el div. Funciona un placer :)

$("#PlayerButtonsContent div").each (function() {
$(this).css("height", $(this).height());
});

$("#PlayerButtonsContent div").hide();

Answer 3

Obtenga la altura una vez que div haya terminado su animación desde la devolución de llamada. Es posible que consigas la altura mientras se está animando el div, y obtienes un valor de transición.

Si su animación es inestable, intente usar las devoluciones de llamada. No abra un div y oculte un div al mismo tiempo. En cambio, oculta tu primer div, y dentro de la devolución de llamada muestra tu siguiente div.

$(".someDiv").slideUp("normal", function(){
  /* This animation won''t start until the first
     has finished */
  $(".someOtherDiv").slideDown();
});

Actualizado (De los comentarios):

redsquare: http://jqueryfordesigners.com/slidedown-animation-jump-revisited/

Answer 4

Esto funcionó para mí:

$(this).pathtoslidingelementhere.width($(this).parent().width());

Answer 5

También tuve un molesto problema de salto de slideUp() que ocurrió en Safari, pero no en Chrome ni en IE. Resultó que la etiqueta div que estaba escondiendo / mostrando estaba justo debajo de otra etiqueta div que contenía float:left divs. Durante el deslizamiento hacia arriba, los divs flotantes se re-renderizarían momentáneamente causando el salto.

La solución era simplemente agregar clear:both al estilo de ocultar / mostrar div.

Answer 6

Mi problema es que, dado que tengo un diseño receptivo , no sé cuál será el ancho o alto de mi elemento. Después de leer esta publicación en el blog http://www.bennadel.com/blog/2263-Use-jQuery-s-SlideDown-With-Fixed-Width-Elements-To-Prevent-Jumping.htm, me di cuenta de que jQuery estaba cambiando la posición de mi elemento para arreglar y jugar con el diseño del elemento. Agregué lo siguiente a mi CSS para el elemento y no noté ningún efecto secundario negativo en IE7 +, Firefox, Chrome y Safari.

display: none;  
overflow: hidden;
position: relative !important;   

Answer 7

El problema se debe a IE (modo peculiar) que intenta renderizar "altura: 0px".

La solución: Anima la altura a 1 (no a 0), luego oculta y restablece la altura:

// slideUp for all browsers
$("div").animate({ height:1 },{ complete:function(){
        // hide last pixel and reset height
        $(this).hide().css({ height:"" });
    } 
});

Answer 8

Reemplazar los valores margin-top y margin-bottom con los valores padding-top y bottom-bottom funcionó para mí. No olvide establecer el valor de margen en 0 después de esto.

Answer 9

Para mí, el problema fue el margen (o relleno) en el div para mostrar / ocultar con diapositiva, pero necesitaba dar margen (o relleno) a ese div. Lo resolví con este truco:

  .slide-div:before{
    content: " ";
    display: block;
    margin-top: 15px;
  }

Answer 10

Necesita un ancho o alto en el contenido para que se pueda animar sin problemas.