2011-11-07 18 views
6

¿Hay alguna forma de agitar una caja div en la carga de la página? Como tal vez solo una o dos veces?Hacer un movimiento de div en la carga de la página?

Actualización: En esta URL la sigo sin funcionar en la carga de la página, ¿qué estoy haciendo mal? http://tinyurl.com/79azbav

Creo que estoy atascado en la carga de la página; que el no se puede ver aquí: Get onpage to work correctly

También he intentado iniciar la animación con mi ya implementada body onLoad:

<body onLoad="document.emvForm.EMAIL_FIELD.focus(); document.ready.entertext.shake();" > 

Pero aún así no como un campeón.

+6

¡Haga clic en actualizar y golpee su monitor! :) – Louie

+0

No lo entiendo. –

+0

@Louie esa es mi alternativa para IE antiguo =) –

Respuesta

24

intentar algo como esto:

EDITAR:
Cambiado Shake()-shake() para mantener la coherencia con las convenciones de jQuery.

jQuery.fn.shake = function() { 
    this.each(function(i) { 
     $(this).css({ "position": "relative" }); 
     for (var x = 1; x <= 3; x++) { 
      $(this).animate({ left: -25 }, 10).animate({ left: 0 }, 50).animate({ left: 25 }, 10).animate({ left: 0 }, 50); 
     } 
    }); 
    return this; 
} 

EDITAR:
En mi ejemplo la posición left se establece en 25, pero se puede reducir este para un efecto más sutil o aumentarla para un efecto más pronunciado.

Uso de la función shake:

$("#div").shake(); 

Aquí hay una jsFiddle que demuestra que: http://jsfiddle.net/JppPG/3/

+0

Gracias por la respuesta, pero ¿dónde puedo definir a qué div se aplica esto? –

+0

@Truth: Gracias por demostrar la implementación. –

+0

@LouieLouie: Es una función jQuery, por lo que puede usarla en cualquier elemento de la página. –

4

variación leve en @ excelente respuesta de James-Johnson para sacudir ~ ~ elementos que se colocan absolute. Esta función toma la posición actual del elemento left y la sacude en relación con este punto. He buscado un batido menos violento, marca de gas 10.

jQuery.fn.shake = function() { 
    this.each(function (i) { 
     var currentLeft = parseInt($(this).css("left")); 
     for (var x = 1; x <= 8; x++) {    
      $(this).animate({ left: (currentLeft - 10) }, 10).animate({ left: currentLeft }, 50).animate({ left: (currentLeft + 10) }, 10).animate({ left: currentLeft }, 50); 
     } 
    }); 
    return this; 
} 
Cuestiones relacionadas