how to make animate.css(plugin) work instantly on live site load?

Tags: javascript,jquery,html,css,animation

Problem :

I tried animate.css library which is working fine in my localhost and jsfiddle but in live site it is not taking action immediately, meaning animate option for the particular div is not happening at the start itself instead the div appears in the specified position at first then it comes from top or whatever effect i am giving.

I think this might be server loading time problem. Might be due to slow loading i can able to see the actual position first then the css class animation is taking place. Am not sure how to over come this.

Jsfiddle with code as in the live site but in js it is working fine.

I tried by giving the class directly in the markup itself instead through js because i thought js may load lately, even though i can able to see the static position on loading the site then the animation taking place from top to bottom

<div id="box" class="animated fadeInDownBig">Checking</div>

I tried by the js way too but no effect. Any idea on what happening here?

Solution :

This is because your div html code is rendered in browser immediately and as you are calling

  $('#box').addClass('animated fadeInDownBig');

after document load. So, it is simple working according to your code after the document load it adds your animated fadeInDownBig effect. if the library you are using is just simple CSS file then I would recommend you this instead calling after document load

<div id="box" class="animated fadeInDownBig">Checking</div>

And if you got other js files etc in your library then use this code

#box {

<div id="box" class="animated">Checking</div>



And far as you are saying it's working fine on your localhost this might be due to it loads every library and files immediately on localhost so $(document).ready is called immediately.

    CSS Howto..

    How much media queries?

    CSS - How do I style a select to fully occupy the td it is in

    How can I use a data attribute to set a background-image in CSS?

    How to center banner with jquery mobile?

    How can razor be used to expand CSS templates?

    How to modify the font family within bootstrap

    How to apply the grayscale jquery plugin to a background image?

    How to show/hide content on click with CSS

    How do I center my content inside the menu?

    How to assign CSS to images which have specific extension, height and width?

    How to change CSS style without id or class

    How do I create a radial css3 border gradient shadow

    how to make target link work giving different css properities

    How to have background color outside of radius border in a tbody in chrome?

    How to move all content (relative,absolute,…) down?

    Z-index problem with ie7 … working in firefox. Images showing behind other img's

    Use CSS to show two div's with background image over a containing div

    How to do Hanging Punctuation in HTML / CSS

    How do you put