Почему функция fadeIn() не работает?

Question

Я сделал страницу входа в html, которая должна быть анимирована после загрузки страницы, я добавил функцию java-скрипта, чтобы сделать то же самое. Но ничего не происходит. Вот мой код,

<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> 

И 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> 

Answer 1

С помощью консоли ошибок браузера для решения проблем JavaScript.

Прежде всего, вы не закрываете параметр функции FadeIn() и сам метод.

EDIT:

Вторая проблема здесь ваш селектор для FadeIn(). При использовании «#» в качестве селектора вы выбираете по id, но у вас нет элемента с идентификатором «login-background». Я предполагаю, что вы хотите, чтобы весь div, содержащий форму, исчезал после того, как страница была загружена. В этом случае вам нужно выбрать div по id «animate-wrapper».

Изменить Вы JavaScript в:

<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> 

Последняя проблема здесь состоит в том, что метод FadeIn() пытается исчезнуть в элементе, который уже виден, поэтому он ничего не делает. Элементу, который вы пытаетесь fadeIn, необходимо, чтобы элемент стиля «display: none» делал его невидимым вначале.

Вы можете изменить это, добавив стиль для DIV с идентификатором «анимировать-обертку» в верхней части кода CSS, не устанавливая «дисплей: нет»:

#animate-wrapper { 
    display:none; 
} 

или просто добавить его в ДИВ сам (который является своеобразным уродливым раствором):

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

EDIT 2:

Если вы хотите, чтобы форма скользить в слева направо, ли ke, вы сказали в комментариях, вам придется немного изменить свой JavaScript. jQuery не имеет метода скольжения в горизонтальном направлении. Вам нужно будет получить ширину обертки, а анимация - показать элемент. Измените строку метода fadeIn() следующим образом:

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

Answer 2

Закройте все методы скобками правильно и создайте все использованные идентификаторы.

Проверьте, что вы импортируете jquery (файл/cdn) в код. если нет, то добавьте в страницу CDN

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

и вы можете использовать браузер консоли (Shift + Ctrl + J) для проверки яваскрипта ошибки.

Если вы новичок, то используйте firebug для отладки javascript/jquery.