2011-03-20 26 views
6

He hecho esto varias veces sin ningún problema, pero por alguna razón es un problema en Here. El deslizamiento hacia abajo comenzará a funcionar (1/3) normalmente y de repente todo se sacudirá y terminará la animación. deslizarse funciona bien. este es el caso de slideDown(), slideToggle y .animate() de forma extraña si también alterno la opacidad en la función animada, no se sobresalta, pero mi texto cambiará de color brevemente.Problema con la animación desigual en jQuery

HTML:

<h2>Phthalate Free: </h2><div class="yamikowebsToggler"> 
    <p> 
    Dibutyl Phthalate is linked to cancer and is present in nail polish, perfume, soft plastics and skin care products. 
    </p></div> 

CSS: leí pues de otra manera que los márgenes pueden causar las sacudidas, pero esto no es ayudar a

h2{color:#76DEFC; margin:0px;} 
    .yamikowebsToggler{margin:0px;} 
    p{margin:0px; color;#000000;} 

JQUERY:

$(document).ready(function(){ 
    $(".yamikowebsToggler").fadeOut(0); 
    $("h2").click(function() 
    { 
     $(this).next(".yamikowebsToggler").stop(true, true).animate(
     { height: 'toggle' }, 
     { 
      duration: 1000, 
     }); 
    }) 
}); 
+0

No veo un problema: http://jsfiddle.net/azjUT/ Ah-- acabo de notar su enlace y hay un problema allí. Creo que debe ser una intersección con algún otro CSS, ya que no hay ningún problema cuando solo este código se usa solo. – tvanfosson

+0

no lo arreglé = ( – user654994

Respuesta

4

Encontré la solución. no tenía nada que ver con mi código, pero un error en jquery. jquery tiene problemas para obtener la altura si se hereda porque cuando está obteniendo la altura, el elemento está oculto. cuando se ocultan elementos son tratados con propiedades CSS de

position: absolute; 
visibility: hidden; 

de solucionar este problema es necesario especificar la altura, ya sea en la animación que no es factible en mi caso ya que tengo muchos que son activar y desactivar. la alternativa es establecer la altura de los elementos. he añadido una nota personalmente en mi jQuery sobre él y lo hizo todo en línea, simplemente añadiendo

style="height: <height in px>;" 

a los elementos que se alternará.

+1

visibilidad media: ¿oculto? – Asaf

0

has necesitado aumento de su {duration: ...}? Además, puede usar la función jQuery incorporada .slideToggle().

+0

thx para su respuesta tvanfosson. Desafortunadamente con todos mis css externos desactivados, el problema persiste. Motionman95 lea la descripción completamente. El problema es el mismo con slideToggle y slideDown. La duración no tiene ningún cambio en el problema. – user654994

0

Sé que esto está marcado como respuesta, pero me gustaría proporcionar una actualización sobre este tema.

El billete correspondiente emisión está aquí: http://bugs.jquery.com/ticket/4541

obstante que ha sido cerrado por los desarrolladores del núcleo, y parece que no se solucionará a menos que haya un parche que no tiene defectos de funcionamiento.

Mientras tanto, si aún desea utilizar jQuery para hacer esto, puede establecer la altura o el ancho del elemento que está intentando deslizar hacia arriba o hacia abajo. No tiene que estar en la unidad "píxel", también puede estar en porcentaje.

1

Tuve un problema similar al animar una división desde el 100% hasta el 0% de ancho.

Lo que sucedía era que al comienzo de la animación la división se hacía más amplia, como por ejemplo 110%.

De todos modos, encontré que la solución era agregar max-width: 100%; en los estilos de CSS en la división específica.

Sólo pensé en publicarlo aquí cuando vine aquí en busca de una solución a este problema. :)