为什么fadeIn() 函数不起作用？ [关闭]答案

【问题标题】：why fadeIn() function is not working? [closed]为什么fadeIn() 函数不起作用？ [关闭]
【发布时间】：2023-03-04 13:39:01
【问题描述】：

我已经完成了一个 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>

【问题讨论】：

您不会关闭fadeIn()s 函数参数或方法本身。所以，语法错误。
现在我意识到这是一个愚蠢的问题！请不要再有 dvs 了！

标签： javascript html

【解决方案1】：

使用浏览器的错误控制台来解决 JavaScript 问题。

首先，您没有关闭 FadeIn() 函数参数和方法本身。

编辑：

这里的第二个问题是你的fadeIn() 选择器。使用“#”作为选择器时，您是按 id 选择的，但没有 id 为“login-background”的元素。我猜你希望包含表单的整个 div 在页面加载完成后淡入。在这种情况下，您需要通过 id "animate-wrapper" 选择 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() 方法试图淡入一个已经可见的元素，因此它没有做任何事情。您尝试淡入的元素需要具有样式元素“display:none”，使其一开始不可见。

您可以通过在 CSS 代码顶部添加一个 id 为“animate-wrapper”的 div 样式来更改此设置，设置为“display:none”：

#animate-wrapper {
   display:none;
}

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

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

编辑 2：

如果您希望表单从左向右滑入，就像您在 cmets 中所说的那样，您将不得不稍微修改您的 JavaScript。 jQuery 没有水平滑动的方法。您将需要获取包装器的宽度，并以动画方式显示元素。将fadeIn()方法的行改成这样：

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

【讨论】：

任何想法仍然行不通
我不太确定它应该做什么。有几件事没有加起来。例如：fadeIn() 方法“#login-background”的 jQuery 选择器甚至不存在。使用 # 时，您按 id 选择。您没有 ID 为“登录背景”的对象。您能否详细说明您希望脚本做什么？
如果我想在页面加载完成后让登录表单淡入，然后专注于用户名输入？我将编辑我的答案
刚刚编辑了我的答案。但我仍然不确定你想用“afterSlide”类完成什么，因为整个 div 在fadeIn/“afterSlide”之前甚至都不可见
@Sajeetharan 你想让它滑进去吗？你需要一些工作来解决这个问题。 jQuery 可以fadeIn、slideDown 和slideUp 但不能从左向右滑动。我将编辑我的答案

【解决方案2】：

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

请检查您将 jquery (file/cdn) 导入到您的代码中。如果没有，则将cdn添加到页面中

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

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

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

【讨论】：