I have done a html Login page which needs to be animated once the page loads, i have added a java script function to do the same. But nothing happens. Here is my code,

```
 <div id="animate-wrapper" class="afterSlide">
        <h1>Login</h1>
        <form name="login" id="login" >
          <div class="row-fluid nowrap">
            <div class="input-container">
              <label>User Name:</label>
              <input id="d_username" name="d_username" autofocus="autofocus" type="text" placeholder="" autocomplete="off">
            </div>
            <div class="input-container">
              <label>Password:</label>
              <input id="d_password" name="d_password" type="password" placeholder="" autocomplete="off">
            </div>
            <div class="input-container">
              <label>&nbsp;</label>
              <button type="submit" class="btn">Login</button>
              <input type="hidden" name="locale" value="en_US">
            </div>
          </div>
          <div id="eval-users-toggle-container">            
              <div id="eval-users-toggle">
                <div>Login as an Evaluator</div>
                <div id="eval-arrow" class="closed"></div>
              </div>

          </div>
        </form>
      </div>

```

And **Javascript**,

```
<script type="text/javascript">
  $(document).ready(function(){          
      $("#login-background").fadeIn(1000, function() {
      $("#login-logo").addClass("afterSlide");
      $("#animate-wrapper").addClass("afterSlide");
      $("#d_username").focus();
      $("#login-footer").addClass("afterSlide");

    });
</script>

```