2011-04-24 22 views

Respuesta

20

que está más allá del alcance de CSS, pero es bastante fácil de hacer con jQuery

$(document).ready(function() {/*You code here*/ } 

o leer más sobre esto aquí =>http://api.jquery.com/ready/

Coloque su código de animación en una clase, digamos .animación

A continuación, llame esa clase en el elemento que desee animar usando jQuery .addclass() (http://api.jquery.com/addClass/)

Algo como esto

<script type="text/javascript"> 
    $(document).ready(function() { 
    $("#element-to-animate").addClass("animation"); 
    }); 
    </script> 
+0

gracias por su respuesta, pero el código para las animaciones vive en mi página css, ¿cómo incorporaría mi CSS a la función? – user127181

+5

$ (documento) .ready (function() {...}) no espere a que se carguen las imágenes. Sugeriría $ (window) .load (function() {...}) en su lugar. –

+0

cambie a .element-to-animate si se trata de una clase como usted dijo. Odiaría que un principiante se confunda con esto. –

1
function atload() {dom_rdy()}window.onload=atload; 

pegarla en la parte superior de los js, y trabajando con la función dom_rdy() llamará cuando dom esté listo, sin jQuery y otros toneladas de código.

1
.bodyclass div{ 
    some animation css code 
} 

Después de la carga corporal sólo se aplica a bodyclass la etiqueta de cuerpo, entonces todos los divs en la página serán animatable. Esta solución es eficiente, dijo @Husar, porque, necesitamos buscar solo el elemento del cuerpo después de que se complete la carga de la página, pero en otro caso, necesitamos cambiar todos los elementos del nombre de la clase que se debe animar.

0

$(window).load(function(){...})

funciona bien!

Pero utilícelo solo cuando desee que se carguen las imágenes.

1
div 
    { 
    -webkit-animation-delay: 5s; 
    animation-delay: 5s; 
    } 
+1

Por favor, agregue alguna explicación a su respuesta – SeniorJD

0

@La solución Mavericks funciona. Sin embargo, una solución mucho más simple que trabajó para mí era:

CSS:

body { 
    display: none; 
} 

JS:

(function() { 
    $('body').css('display', 'block'); 
})(); 

o puede utilizar mostrar/ocultar. Pero, la animación se volvió defectuosa en IE10 e IE11. Por lo tanto, he cambiado el código para específicamente para estos navegadores para:

CSS:

body { 
    visibility: hidden; 
} 

JS:

(function() { 
    $('body').css('visibility', 'visible'); 
})(); 

También encontré esto: https://css-tricks.com/transitions-only-after-page-load/

Tal vez podría ayudar a alguien .

+1

Por favor, hágamelo saber antes de votar, ya que funcionó para mí. –

Cuestiones relacionadas