jquery - left - slidetoggle is not a function

slideToggle height is "jumping"

Question

Mi slideToggle() jQuery slideToggle()

¿Alguien puede decirme por qué mis cajas "saltan" cuando las abro? La primera mitad se deslizan, el resto se "saltan".

Gracias Johannes

Answer 1

Accidentalmente, creo que la solución más fácil de usar es agregar una función personalizada a jQuery con un relleno animado / margen superior / inferior 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 ejemplo de uso:

$(this).slideShow(320,''easeOutQuart'');
$(this).slideHide(320,''easeOutQuart'');

Mi ejemplo de opacidad animada para alternar tu, puedes modificarlo cuando lo necesites.

Answer 2

En mi situación anterior tuve el mismo problema, y ​​el problema fue que tuve la transition: all 350ms; declaración en mi CSS que estaba en conflicto con .slideToggle . Eliminar eso lo arreglé para mí, así que busca las transiciones en CSS.

Answer 3

Encontré este problema en muchas ocasiones en las que estaba animando solo la altura con slideToggle pero no el margen / el relleno.

Entonces, algo como esto podría resolverlo:

$("#thediv").slideToggle().animate({"margin-bottom": "toggle"});

Answer 4

Encontré que establecer un ancho en el contenedor conmutado resolvió el problema por mí

.toggle-container { 
   width: 100%; }
}

Leí que slideToggle se basa en un ancho y alto inicial para funcionar correctamente, por lo que, dependiendo de su página, es posible que deba establecer el ancho o el alto para obtener el comportamiento que espera.

Answer 5

Encuentro que la solución más fácil es, por lo general, quitar el relleno del elemento que se desliza y agregar el relleno a un elemento dentro del elemento deslizante.

En este ejemplo, el div con el atributo de data-role="content" es el que se desliza, y el relleno se aplica a tab-example__content

<div data-role="content" class="tab-example__content">
    ...
</div>

Para arreglar el deslizamiento ''desigual'' agregué un nuevo div dentro del elemento deslizante y moví la clase / el relleno a eso, así:

<div data-role="content">
    <div class="tab-example__content">
        ...
    </div>
</div>

Ahora es agradable y suave

Answer 6

Es una solución simple. Agregue esta regla CSS a su hoja de estilo ( Probado en Firebug para trabajar, y desde mi experiencia pasada con este problema, esta es la solución ):

ol.message_list { position: relative }

Es un error de CSS, no un error de jQuery per se.

Answer 7

He encontrado otra cosa que la afecta. Eliminando min-height del CSS de ese elemento lo arreglé para mí.

Answer 8

La solución más rápida en tu caso:

.message_container { width: 361px; }

No estoy seguro de por qué, pero no le doy al contenedor un ancho fijo cuando contiene un <p> causa problemas, le da uno y el sobresalto desaparece.

Answer 9

Lo que me ayuda es

overflow: hidden

a la palanca que ...

Answer 10

Si se establece, la propiedad de min-height también puede desencadenar una falla. En este caso necesitas restablecerlo:

.toggle-container {
position: relative;
min-height: 0;
}

Answer 11

css padding y jquery slideToggle no funcionan bien juntos. Intenta recortar el relleno.

Answer 12

si el cuadro que se alterna no tiene la altura predeterminada, debe agregarlo, para la altura automática agregue esto

.toggle-container {
 height: auto;
}