¡El slideUp y slideDown básico de jQuery me vuelve loco!

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

  •  11-09-2019
  •  | 
  •  

Pregunta

mis habilidades de jQuery son bastante buenas normalmente, pero esto me está impulsando ¡Enojado!

Es un acordeón bastante simple que codifiqué desde cero.Usando jQuery 1.3.2, por lo que no debería haber ningún error de salto, pero básicamente si Echa 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 es contiene texto que cree que es más corto de lo que es y salta.Si es una imagen no hay problema.

No puedo entender en qué me estoy equivocando, obviamente está en el CSS en algún lugar, pero he probado todos los sospechosos habituales como display:block

¡Cualquier idea sería recibida con gratitud!

Suyo Chris

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

¿Fue útil?

Solución

Se necesita una anchura o altura sobre el contenido para que pueda animar sin problemas.

Otros consejos

He de reconocer que he encontrado mi propia solución dinámica ahora.

http://www.mizudesign.com/jquery/accordian/basic.html debe ser fijo.

Es muy simple en realidad - sólo se suma la altura usando css antes de ocultar el div. Funciona un regalo:) 

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

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

Creo que el problema es que cuando se añade el relleno o el margen entonces salta, este fue el caso por mí. usted tiene que animar al margen de la devolución de llamada

También "tener en cuenta" que las tablas se comportan buggy con slideDown slideUp y más bien utilizar fadeIn fadeOut

Obtener la altura una vez que el div ha terminado su animación a partir de la devolución de llamada. Es posible que usted está recibiendo la altura, mientras que el div se está animando, y que está obteniendo un valor de transición.

Si su animación es nervioso, trate de usar las devoluciones de llamada. No abra un div y ocultar un div al mismo tiempo. En su lugar, ocultar su primera div, y dentro de la devolución de llamada mostrar su lado 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/

También tuve un problema molesto slideUp() salto que se produjo el Safari, pero no cromo o IE. Resultó que la etiqueta div yo estaba escondido / muestra estaba justo debajo de otra etiqueta div que contiene divs float:left. Durante el deslizamiento hacia arriba, los divs flotantes serían momentáneamente re-renderizados causando el salto.

La solución fue simple adición de clear:both al estilo de la ocultar / mostrar div.

Mi problema es que como tengo un diseño de respuesta No sé cuál será el ancho o alto de mi elemento.Después de leer esta publicación de 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 a fija y alterando 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;

Sustitución de valores de margen inferior-margin-top y con valores padding-bottom padding-top e hicieron el truco para mí. No se olvide de ajustar el margen a 0 después de esto.

Esto funcionó para mí: 

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

El problema se debe a IE (modo peculiaridades) tratando de hacer "altura: 0px".

La solución: Animación de altura a 1 (no 0), entonces ocultar y restablecer altura: 

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

Para mí, el problema era el margen (o relleno) en el div para mostrar / ocultar con tobogán, pero necesitaba para dar margen (o relleno) a la div. He resuelto con este truco: 

  .slide-div:before{
    content: " ";
    display: block;
    margin-top: 15px;
  }
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top