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（）函数参数和方法本身。

编辑：

这里的第二个问题是fadeIn（）的选择器。当使用＆＃34;＃＆＃34;作为选择器，您按ID选择，但您没有ID为＃34; login-background＆＃34;的元素。我猜测，一旦页面加载完毕，你想要包含表单的整个div。在这种情况下，您需要通过id＆＃34; animate-wrapper＆＃34;选择div。

将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（）方法试图淡入已经可见的元素，因此它没有做任何事情。您尝试淡化的元素需要具有样式元素＆＃34; display：none＆＃34;使它一开始不可见。

你可以通过为你的div添加一个带有id＆＃34; animate-wrapper＆＃34;的样式来改变它。在CSS代码的顶部，设置＆＃34; display：none＆＃34;：

#animate-wrapper {
   display:none;
}

或者只是将它添加到div本身（这是一种更丑陋的解决方案）：

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

编辑2：

如果您希望表单从左向右滑动，就像您在评论中所说的那样，您将需要稍微修改一下JavaScript。 jQuery没有一个水平滑动的方法。您将需要获取包装器的宽度，并且动画显示该元素。将fadeIn（）方法的行更改为：

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

Answer 2

正确关闭所有方法括号并创建所有使用过的ID。

请检查您是否将jquery（文件/ cdn）导入到您的代码中。如果没有，那么将cdn添加到页面

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

您可以使用浏览器控制台（Shift + Ctrl + J）来检查javascript错误。

如果你是新手，那么使用firebug进行调试javascript / jquery。

为什么fadeIn（）函数不起作用？

2 个答案: