javascript - jQuery 淡出不起作用?

标签 javascript jquery html fadeout

好吧,我有以下 HTML 代码,该代码适用于应该从 API 检索天气数据的应用程序。

<!DOCTYPE html>
<html>
  <head>
    <title>FastCast</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/footer.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
    <link rel="shortcut icon" href="favicon1.ico"/>
  </head>
  <body>
    <center>
    <h1><b>Welcome to FastCast!</b></h1>
    <div>
    <p><font size="3">FastCast is a web application designed to gather weather information from various sources and display it in an easy-to-read format.</font></p>
    <hr></hr>
    <div id-"all">
    <div id="picDiv">
    <img id="imgDisp" src="logo.jpg">
    </div>
    <p><font size="6">Enter you location to get started.</font></p>
    </div> 
    <form class="form-inline" role="form">
    <div class="form-group">
    <input type="text" class="form-control" id="Location" placeholder="ex. Boston, MA">
    </div>
    </form>
    <p><i>Press enter to continue.</i></p>
    <script>
    window.onkeydown = function(event) {
        if (event.keyCode === 13) {
            var x = document.getElementById("Location").value;
            var last2 = x.slice(-2);
            alert(last2);
            $(document).ready(function() {

                $('#all').fadeOut(1000);

            });
        }
    }
    </script>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    </center>
    </body>
    <div class="footer" id="footer">Developed in Twitter Bootstrap | Information from openweathermap.org | Tyler Jablonski, 2014+</div>
</html>

现在,我仍在设置界面。在代码的末尾,我有一些 Javascript,当用户按下 Enter 键时,它会提醒文本框中的最后两个字符。这工作正常。然而,我还有一些 jQuery 之后应该淡出 .这部分不起作用。我收到警报,但没有消失。这是为什么?

您可以在这里查看页面:https://googledrive.com/host/0B7jcQuOYGlvqOHBHN3VTTi11YUU/html.html

谢谢。

最佳答案

您已放置 div id-"all" 而不是 div id="all",因此 jQuery 无法定位该 div

关于javascript - jQuery 淡出不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21356771/

相关文章:

javascript - 如何实现类似谷歌新闻的搜索框

javascript - 下拉菜单 - 固定属性

javascript - 如何使用带有 sequelize 和 mysql 的 Hook (beforeCreate) 保存密码

javascript - ajax 调用内发出警报

javascript - 使用 javascript/AJAX 将数据插入 MySQL 数据库

javascript - OO JavaScript 回调 : Am I doing it right?

javascript - 使用 JQuery 或 Javascript 将字符串格式化为数字、逗号分隔值

javascript - jQuery 动态加载图像无法显示多个图像如何替换 src= 并且不附加到它

javascript - 获取选中的单选按钮的值

html - 容器 div 额外边距 ie6