javascript - left - jQuery slide está nervioso

slide up jquery

Question

Traté de deslizar dentro y fuera de un DIV con la función de alternar de jQuery, pero el resultado siempre es nervioso al principio y / o al final de la animación. Aquí está el código js que uso:

$(document).ready(function(){
    $(''#link1'').click(
        function() {
            $(''#note_1'').parent().slideToggle(5000);
        }
);

Y el HTML:

<div class="notice">
    <p>Here''s some text. And more text. <span id="link1">Test1</span></p>
    <div class="wrapper">
        <div id="note_1">
            <p>Some content</p>
            <p>More blalba</p>
        </div>
    </div>
</div>

También puede ver el ejemplo completo aquí: jQuery Slide test

Usualmente uso Mootools y puedo hacer esta diapositiva sin ningún problema con ella. Pero estoy comenzando un nuevo proyecto en Django y la mayoría de las aplicaciones en Django usan jQuery. Entonces para eso y después de leer este jQuery vs Mootools , decidí que sería una buena ocasión para comenzar a utilizar jQuery. Entonces mi primera necesidad fue deslizar este DIV. Y no funcionó correctamente.

Hice más búsqueda y descubrí que es un error antiguo en jQuery con margen y relleno aplicados al DIV. La solución es envolver el DIV en otro DIV. No solucionó el problema en mi caso.

Buscando más encontré esta publicación Slidedown animation jumprevisited . Arregla un salto en un extremo pero no en el otro ( Test2 en la prueba de jQuery Slide ).

En el desbordamiento de la pila, encontré esta animación de deslizamiento de jQuery IE . En los comentarios, vi que el problema es con la etiqueta P dentro del DIV. Si reemplazo las etiquetas P con etiquetas DIV que solucionan el problema, esa no es la solución adecuada.

Por último, encontré esta diapositiva de comportamiento raro de jQuery . Leerlo Entendí que el problema resuelto al cambiar de la etiqueta P a DIV era con los márgenes de la P (no presente en la DIV) y el colapso de los márgenes entre los elementos. Entonces, si cambio los márgenes a paddings, soluciona el problema. Pero pierdo el comportamiento colapso de los márgenes, colapsando lo que quiero.

Honestamente, puedo decir que mi primera experiencia con jQuery no es realmente buena. Si quiero usar uno de los efectos más simples en jQuery, no debo usar la función adecuada (slideToggle), sino usar un código hecho a mano Y ajustar el DIV en otro DIV Y cambiar los márgenes a paddings, arruinando mi diseño.

¿Extrañé una solución más simple?

Como sugiere krdluzni, intenté escribir como script personalizado con el método animado. Aquí está mi código:

var $div = $(''#note_2'').parent();
var height = $div.height();

$(''#link2'').click(
    function () {
        if ( $div.height() > 0 ) {
            $div.animate({ height: 0 }, { duration: 5000 }).css(''overflow'', ''hidden'');
        } else {
            $div.animate({ height : height }, { duration: 5000 });
        }

        return false;
});

Pero eso tampoco funciona porque jQuery siempre establece el desbordamiento como visible al final de la animación. Así que el DIV está reapareciendo al final de la animación, pero superpuesto en el resto del contenido.

Lo intenté también con UI.Slide (y Scale and Size). Funciona, pero el contenido debajo del DIV no se mueve con la animación. Solo salta al final / inicio de la animación para llenar el espacio. No quiero eso.

ACTUALIZAR:

Una parte de la solución es establecer la altura del contenedor DIV dinámicamente antes que nada. Esto resuelve un salto. Pero no es la única causa al colapso del margen. Aquí está el código:

var parent_div = $("#note_1").parent();
parent_div.css("height", parent_div.height()+"px");
parent_div.hide();

SEGUNDA ACTUALIZACIÓN:

Puede ver el error en el propio sitio de jQuery en esta página (Ejemplo B): Tutoriales: ejemplos en vivo de jQuery

TERCERA ACTUALIZACIÓN:

Intenté con jQuery 1.4, no hay más posibilidades :-(

Answer 1

Acabo de aprender que este problema también puede ocurrir si hay elementos flotantes en el elemento de expansión / colapso. En ese caso, un clearfix (clear: both;) al final (aún dentro) del elemento animado puede deshacerse de él.

Answer 2

Agregando mi solución: resultó que mi problema era flexbox (solo en Chrome). Tenía align-items: baseline; establecer en el elemento padre. Establecer align-self: center; a mi diapositiva Alternar el elemento hijo de ancho completo y lo aclaró. Gran uso de dos horas.

Answer 3

Aquí hay muchas sugerencias y muchas cosas sobre lo que funciona. Para mí, el problema de comportamiento fue cuando la animación de expandir el contenedor se expandía demasiado y luego volvía a la altura de expansión correcta (todo hecho como parte de la animación). A modo de ejemplo, la animación se expandiría a una altura de 500px inicialmente y luego se retractaría a 450px. No hubo ningún problema con el colapso.

La solución que funcionó fue agregar al div expandible / colapsado, un CSS de: white-space: nowrap;

Eso funcionó perfectamente: expansión suave a la altura correcta.

Answer 4

Asegúrese de no tener reglas de transición CSS establecidas globalmente o en su contenedor o cualquier elemento incluido. También causará sacudidas.

Answer 5

Creo que animate () es la forma más confiable de animar cualquier cosa en jQuery (al menos, navegador cruzado).

Esto envuelve dinámicamente el contenido en un div, luego anima la altura de ese envoltorio div usando la altura de su contenido interno.

http://jsfiddle.net/BmWjy/13/

$(''a'').click(function(event) {
        event.preventDefault();
        xToggleHeight($(this).next());
});

//For each collapsible element.
$(''.collapsible'').each(function() {
        //Wrap a div around and set to hidden.
        $(this).wrap(''<div style="height:0;overflow:hidden;visibility:hidden;"/>'');
});

function xToggleHeight(el){
        //Get the height of the content including any margins.
        var contentHeight = el.children(''.collapsible'').outerHeight(true);
        //If the element is currently expanded.
        if(el.hasClass("expanded")){
                //Collapse
                el.removeClass("expanded")
                        .stop().animate({height:0},5000,
                        function(){
                                //on collapse complete
                                //Set to hidden so content is invisible.
                                $(this).css({''overflow'':''hidden'', ''visibility'':''hidden''});
                        }
                );
        }else{
                //Expand
                el.addClass("expanded").css({''overflow'':'''', ''visibility'':''visible''})
                        .stop().animate({height: contentHeight},5000,
                        function(){
                                //on expanded complete
                                //Set height to auto incase browser/content is resized afterwards.
                                $(this).css(''height'','''');
                        }
                );
        }
}

Answer 6

Descubrí que lo que funciona consistentemente es establecer un borde 1px invisible:

border: 1px solid transparent;

No es necesario corregir el ancho o la altura ni nada más y la animación no salta. ¡Hurra!

Answer 7

El problema es que está realizando la acción en el elemento primario, y esto elimina el CSS relacionado con ese elemento.

Necesita ejecutar la diapositiva en su nota1, no el padre de la nota 1.

Tuve el mismo problema y lo solucioné bajando un nivel.

Answer 8

En mi caso lo resolví agregando style="white-space:nowrap;" al elemento para evitar errores de cálculo en la función jQuery; no es necesario establecer un ancho fijo a menos que deba envolverlo.

Answer 9

Estaba usando slideDown() esta manera

$(''#content'').hide().delay(500).slideDown(500); 

Para mí, era el contenedor principal #content elemento de contenido. Lo estaba ocultando y luego llamando a slideDown() . padding propiedad de padding en el CSS y todo funcionó bien después de eso. Por lo general, es un margen, relleno o% de ancho, por lo que el método más fácil es comentar cada propiedad y probarlas 1 por 1 para obtener los resultados.

Answer 10

Intenta eliminar todos los márgenes de CSS de todos los elementos. Por lo general, la animación desigual proviene de los márgenes que no se tienen en cuenta en el marco de la animación.

Answer 11

Intenta establecer la propiedad ''posición'' del contenedor (en este caso, el div .notice) en ''relativo''.

Trabajó para mi. Fuente: slideToggle height está "saltando"

Answer 12

La sacudida ocurre cuando el padre div ".wrapper" en su caso tiene relleno.

El relleno va en el div infantil, no en el padre. jQuery anima la altura, no el relleno.

Ejemplo:

  <div class="notice">
     <p>Here''s some text. And more text. <span id="link1">Test1</span></p>
     <div class="wrapper" style="padding: 0">
        <div id="note_1" style="padding: 20px">
           <p>Some content</p>
           <p>More blalba</p>
        </div>
     </div>
   </div>

Espero que esto ayude.

Answer 13

La solución es que div deslizante debe tener el ancho establecido en píxeles. No use ''auto'' ni ''%''. ¡Y tendrás un gran resultado! El problema está en los elementos en línea que están en un div deslizante.

pero si tienen ancho en px, la altura será idéntica. Intentalo.

Answer 14

Lo solucioné estableciendo:

box-sizing: content-box;

Answer 15

Me encontré con este problema hoy. Sin embargo, me di cuenta de que deshabilitar todo el CSS solucionó el problema. También sabía que funcionaba bien antes, así que deben haber sido los cambios recientes los que causaron el problema.

Resultó que usaba transiciones en CSS para facilitar la entrada y la salida de los suspensores .

Una vez que estas transiciones fueron eliminadas de los elementos, agregué que todo estaba bien.

Entonces, si tiene el mismo problema, simplemente agregue estas líneas a los elementos que está agregando:

-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
-ms-transition: none;
transition: none;

(Podría haber abusado un poco de las transiciones no solo añadiéndolas a los elementos para los que quiero tener transiciones, sino usándolos para todo el sitio web).

Answer 16

Me encontré con que el mismo error tardó días en encontrar una solución. el problema es cuando el elemento está oculto jquery está obteniendo la altura incorrecta. Para solucionarlo, debe obtener el alto antes de esconderse y usar una animación personalizada a esa altura. es complicado ir aquí para una mejor explicación

Answer 17

Noté que si tienes un <br /> después de tu contenedor <div> la animación también estará nerviosa. Eliminar esto resolvió mi problema.

Answer 18

Obviamente hay muchas soluciones diferentes para este problema, y ​​dependiendo de su diseño, las diferentes soluciones tienen diferentes resultados.

Aquí estaba lo que tenía (despojado)

<div>
   <p>Text</p>
</div>
<div class="hidden">
   <p></p>
</div>

Cuando usaría jQuery para mostrar <div class="hidden"> , el margen en el elemento <p> colapsaría con el margen del elemento <p> sobre él.

Pensé que era extraño ya que estaban en diferentes <divs> .

Mi solución fue eliminar el margen en la parte inferior de la <p> . Tener un margen en un lado evita que el margen desde la parte inferior del primer <p> colapse con la parte superior del segundo <p> .

Esta solución resolvió mi problema, probablemente puede aplicarse a otros, pero puede no funcionar para todos.

Answer 19

Para mí, eliminar la altura mínima de mi contenedor resolvió el problema.

Answer 20

Para mí, la solución fue que tenía una definición de estilo CSS como la siguiente:

* {
    transition: all .3s;
}

¡Eliminar esta era la solución!

Answer 21

Podrías escribir una animación personalizada usando el método animado. Esto le dará control absoluto sobre todos los detalles.

Answer 22

Puede intentar agregar un tipo de documento si no tiene uno, funcionó para mí en IE8 después de encontrar la sugerencia aquí en SO: jQuery slideToggle salta alrededor . Sugiere una DTD estricta, pero acabo de utilizar el tipo de documento que utiliza google.com: <!doctype html> y solucionó mi problema.

Answer 23

Se topó con este problema hoy, vio esta pregunta y comenzó a retocar basándose en lo que vi aquí. Resolví nuestro problema al eliminar la posición: relativa del CSS del div que contiene. No más rarezas después de eso. Mis 2 centavos.

Answer 24

Solo tiene que modificar los efectos hacia arriba, hacia abajo en effects.js para que tengan en cuenta los márgenes o rellenos que puedan existir y luego ajustar lo que perciben como el tamaño total del elemento para acomodar esos valores ... algo a lo largo de estos líneas....

Effect.BlindDown = function(element) {
  element = $(element);
  var elementDimensions = element.getDimensions();

//below*
  var paddingtop = parseInt(element.getStyle(''padding-top''));
  var paddingbottom = parseInt(element.getStyle(''padding-bottom''));
  var totalPadding = paddingtop + paddingbottom;

  if(totalPadding > 0)
  {
   elementDimensions.height = (elementDimensions.height - totalPadding);
  }
//above*

  return new Effect.Scale(element, 100, Object.extend({
    scaleContent: false,
    scaleX: false,
    scaleFrom: 0,
    scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width},
    restoreAfterFinish: true,
    afterSetup: function(effect) {
      effect.element.makeClipping().setStyle({height: ''0px''}).show();
    },
    afterFinishInternal: function(effect) {
      effect.element.undoClipping();
    }
  }, arguments[1] || { }));
};

Answer 25

Tuve el mismo problema con ''espasmos'' con divs dentro de mi etiqueta de navegación: mi objetivo es mostrar una lista desordenada al desplazar el div (si existe). Mis listas se crean dinámicamente para que no tengan un valor fijo.

Aquí está la solución:

$("nav div").hover(
  function() { // i.e. onmouseover function

    /****simple lines to fix a % based height to a px based height****/
    var h = jQuery(this).find("ul").height(); //find the height
    jQuery(this).find("ul").css("height", h); 
                         //set the css height value to this fixed value
    /*****************************************************************/

    jQuery(this).find("ul").slideDown("500");
  },
  function(){ // i.e. onmouseout function
    jQuery(this).find("ul").slideUp("500");
  });
});

Answer 26

Tuve el mismo problema, pero ninguna de las soluciones propuestas me funcionó, por lo que propongo una solución que elimina la dependencia de slideToggle() .

Notas de chispa : Cargue la página como normal, recopile la altura de cada elemento que desee alternar, almacene esa altura en un atributo de datos especial y luego contraiga cada elemento. Entonces es tan fácil como cambiar la max-height entre el valor en el atributo de data-height de data-height del elemento (expandido) y cero (colapsado). Si desea agregar relleno adicional y márgenes, etc. a los elementos, le recomiendo que los guarde en una clase de CSS separada para agregarlos y eliminarlos con la propiedad de altura máxima.

Coloque el jQuery justo después de los elementos que desea alternar y permita que se ejecuten durante la carga de la página (para que no tenga que verlos cargar y luego colapsar).

HTML

<ul id="foo">
   <li>
      <h2>Click Me 1</h2>
      <div class="bar">Content To Toggle Here 1</div>
   </li>
   <li>
      <h2>Click Me 2</h2>
      <div class="bar">Content To Toggle Here 2</div>
   </li>
</ul>

CSS

#foo>li>div.bar {transition: all 0.5s;
   overflow: hidden;}

jQuery

$(''#foo h2'').each(function(){
   var bar = $(this).siblings(''.bar'');
   bar.attr(''data-height'', bar.height()); //figure out the height first
   bar.css(''max-height'', ''0px''); //then close vertically
});
$(''#foo h2'').click(function(){
   var bar = $(this).siblings(''.bar'');
   if ( bar .css(''max-height'') == ''0px'' ){ //if closed (then open)
      bar.css(''max-height'', bar.data(''height'') + ''px'');
   } else { //must be open (so close)
      bar.css(''max-height'', ''0px'');
   }
});

Aquí hay un JSFiddle en funcionamiento : http://jsfiddle.net/baacke/9WtvU/

Answer 27

Tuve el mismo problema. Lo arreglé añadiendo esto:

.delay(100)

¿Adivina darle más tiempo para pensar lo ayuda?

Answer 28

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