2011-04-14 21 views
6

El uso del efecto de sacudida de jQuery UI hace que el elemento se ejecute en la nueva línea, se sacuda y luego vuelva a correr. Traté de cambiar el CSS de posición, etc., pero, salvo que lo pirateé, siento que hay una solución normal y elegante.Problema UI de JQuery Shake

http://jsfiddle.net/ShhER/6/

quiero decir que es un error, pero no es probable que ... alguna idea?

+0

funciona bastante bien en el violín. ¿no puedes cambiar la distancia de la sacudida en el eje x? No he usado ese efecto y no puedo recordar la documentación –

+0

no, toma un parámetro pero, independientemente, siempre va muy a la izquierda, luego sacude la distancia de ese parámetro. aquí hay otro ejemplo: http://jsfiddle.net/ShhER/6/. Solo presione actualizar y notará el problema de temblor. – delphi

Respuesta

2

El elemento que se anima debe ser de nivel de bloque o tener display: block explícitamente en él.

Configuré display: block, y luego ajusté el código de la etiqueta en consecuencia. Funcionó bien

jsFiddle.

+0

Esto funcionaría muy bien, pero ahora no puedo tener dos elementos uno al lado del otro (lo que hago en mi código principal). http://jsfiddle.net/ShhER/6/ (Quité la pantalla: bloquear aquí) – delphi

+3

@delphi [Float them] (http://jsfiddle.net/alexdickson/ShhER/7/). – alex

+0

Funciona muy bien, gracias! – delphi

0

Simplemente depuro el efecto jQuery UI Shake y descubrí que el complemento crea un contenedor para el elemento que utilizará el efecto. Este contenedor es necesario para aplicar la función animada de jQuery con los atributos dados de Shake.

Lo arreglé agregando un con un 100% a la envoltura. En mi caso tengo algo como esto:

<div class="errorBox nameBox" style="position: absolute; top: 352px; left: 948.5px; display: block; width: 100%"> 
    <div class="errorArrow"></div> 
    <div class="errorDescription">Type your name</div> 
</div> 

Saludos. !!

0

Encontré que jQuery agregaba el contenedor al elemento con la clase ui-effects-wrapper Así que al agregar este css resolví mi problema.

.ui-effects-wrapper { 
     display:inline; 
    }