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

$(document).ready(function(){
  $('#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 {
width:60%;
height:60%;
left:20%;
top:20%;
background-color:red;
position:fixed;
display:none;
}

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

$(document).ready(function(){

  $('#box').css('display','block').addClass('fadeInDownBig');
});   

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 to Properly Add CSS in a MailMessage

    Getting the title of a picture overlayed onto the picture of a slideshow

    How to make sure CSS/JS files are not cached on browser? [duplicate]

    How to override bootstrap styles?

    How to have multiple CSS color transitions on a single text line?

    How to wait for a video background in HTML until it finish and then view the contents of body section?

    overlay showing in background instead of on top

    How do you right-align text into a column?

    What is WebKit and how is it related to CSS?

    How to fix width of column in two-column CSS lay out?

    How to Make Tabs In CSS?

    How to abstract this single case (showing text field based on selection of a drop down list) into a general function in jQuery?

    How can I select complete
  • element in navigation bar when hovered or selected?
  • Image won't show up html + css

    CSS how to center ::after pseudo elem

    How to combine jQuery animate with css3 properties without using css transitions?

    How to show hidden div in the same line as the paragraph text?

    How to make input box show up from right to left?

    How to only show certain parts with CSS for Print?

    In CSS, how to toggle the tab color if it was selected (without using javascript)

    How to display separate paragraphs in the same area using CSS HTML

    CSS show div background image on top of other contained elements [duplicate]

    How to add space between elements (but not outside of them) using CSS?

    how to put text on the middle of an image

    How to use css to crop parts of an image

    How can I scale the space taken by a scaled element

    jQuery / CSS: How to add page breaks dynamically

    how i can change the CSS class on click of an element [closed]

    I can not load the CSS pages which can be accessed after a login carry with spring security. How can I fix it?

    CSS positioning: how to make it relative to one element but not the other?