[Solved] why fadeIn() function is not working? [closed]

Question

Use the Error console of your browser to tackle JavaScript problems.

First of all you are not closing the FadeIn() function parameter and the method itself.

EDIT :

Second problem here is your selector for the fadeIn(). When using an “#” as selector you are selecting by id, but you have no element with id “login-background”. I;m guessing you want the whole div containing the form to fadeIn once the page is done loading. In that case you need to select the div by id “animate-wrapper”.

Change you JavaScript into:

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

Last problem here is that the fadeIn() method is trying to fade in a element which is already visible, therefore it is not doing anything. The element you are trying to fadeIn needs to have the style element “display:none” making it not visible at first.

You can change this by adding a style for your div with id “animate-wrapper” at the top of your CSS code, setting “display:none”:

#animate-wrapper {
   display:none;
}

Or just adding it in the div itself (which is kind of the uglier solution):

<div id="animate-wrapper" class="afterSlide" style="display:none">

EDIT 2 :

If you want the form to slide in from left to the right, like you said in the comments you will have to modify your JavaScript a bit. jQuery does not have a method to slideIn horizontally. You will need to get the width of the wrapper, and animate show the element. Change the row of the fadeIn() method to this:

var wrapper_width = $("#animate-wrapper").width();
$("#animate-wrapper").width(0);
$("#animate-wrapper").show().animate({width: wrapper_width}, 1000, function() {

Accepted Answer