Tengo 5 divs consecutivos a los cuales les he aplicado un efecto toggle al darle click sobre ellos. Me sucede una cosa y es que algunos se despliegan con suavidad pero otros a trompicones. Con trompicones no me refiero a lo que sucede por ejemplo aquí -> http://jsfiddle.net/gPxbn/2/ En mi caso la animación es correcta solo que va lenta, algo así como si vieras un juego que va a 15 FPS y otro que va a 60 FPS XDD. Como digo, el último se desliza bien pero los otros van lentos.
En el CSS, dale a la ul width: 200px (el slideToggle para que vaya bien necesita tener un ancho definido creo)
Bueno, aquí tenéis el ejemplo en vivo: http://jsfiddle.net/H3PSX/2/
Y he de decir que no se ve de la misma forma que en la web ya montada, aquí se disimula más mientras que en el proyecto donde lo tengo ya incorporado se ve un poco más exagerado.
Al grano. Lo que me refiero es la diferencia que hay en el toggle al hacer click en el primer y último elemento. En el último las líneas se deslizan suavemente pero en el primero no tanto. Es probable que veáis esto como algo absurdo y que debería estar adelantando otras cosas pero como comenté, en el proyecto ya montado se ve más descarado.
He probado en varios navegadores, y ese mismo ejemplo en jffiddle donde mejor me va es en explorer xD. Sin embargo, ilusionado, he ido a probar el proyecto funcionando en este mismo navegador y ya no va bien, va incluso peor que en Chrome. En fin. No sé si es cosa de mis estilos css, del navegador o que se yo.
EDIT: No me refiero al pequeñito salto que pega al caja al estirarse. Sólo al deslizamiento.
#3 Si le doy 200px, ¿no estoy perdiendo la flexibilidad de los elementos de la página para estirarse y encogerse a su gusto?
#4 podría ser porque el primer elemento desliza a los demás mientras que el último solo abre su caja.
#6 Lo acabo de probar y ha mejorado bastante. No lo ha quitado del todo pero tal vez sea por lo de #5, que tiene que desplazar para abajo el resto. Ahora sí está más aceptable. Gracias. Ahora bien, me parece increíble la virguería. xD
Por lo que desliza elementos no es. Recientemente he realizado un toggle con una caja que empujaba mucha cantidad de texto y elementos hacia abajo y el rendimiento era perfecto.
Es por los padding y width, creo.
#4 Prueba con porcentajes en ese caso. Pensaba que tu caso en concreto era lo que pusiste en #1.
Sí que me suena que tiene que existir el width en el elemento al que hagas el toggle para que no haga cosas raras.
Pues #8 tiene razón. Los padding los he quitado y funcionan bien pero ahora no me queda presentable. Voy a buscar a ver si hay solución y si encuentro algo edito.
Aqui no tengo IE para probar, pero si le quieres quitar el padding le puedes poner height+line-height para centrar el texto. Seria algo asi:
.mensaje-int {
height: 50px;
line-height: 50px;
padding-left: 20px;
}
Lo he probado y sigue igual. No sé que será. He metido 10 para probar y cada vez más lento. A más divs, más lento hace el toggle del superior, pero el inferior va fino. Haré el ejercicio con cuadros simples y empezaré a meterle propiedades, a ver si es verdad que es cuestión del CSS...
EDIT: Pruebas hechas y todo sigue igual. Me doy por vencido.