元素不会在我的代码中 .fadeTo。不知道出了什么问题 JavaScript， JQuery， HTML

我正试图让代码中类名为"play"one_answers"credits"的按钮（仅有的两个按钮）在使用JQuery单击时淡出，但它不起作用。请告诉我出了什么问题。

HTML

<!DOCTYPE html>
<html>
<head>
    <link href='http://fonts.googleapis.com/css?family=Press+Start+2P' rel='stylesheet' type='text/css'>
    <link rel='stylesheet' href='style.css'/>
    <script src='script.js'></script>
</head>
<body>
<div id="startMen">
    <div class="playDiv">
        <button class='play'>Play</button>
    </div>
    <br>
    <div class="creditsDiv">
        <button class='credits'>Credits</button>
    </div>
</div>
</body>
</html>

JavaScript

$(document).ready(function(){
    $('.play, .credits').click(function(){
        $('.play, .credits').fadeTo('slow',0);
    });
});

将其添加到<head>部分

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

JQuery尚未链接到HTML。将它添加到指向script.js的链接之前的某个位置，这样Javascript的其余部分也可以使用JQuery库。

应为：

<head>
    <link href='http://fonts.googleapis.com/css?family=Press+Start+2P' rel='stylesheet' type='text/css'>
    <link rel='stylesheet' href='style.css'/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src='script.js'></script>
</head>

您需要在脚本中包含JQuery库。它托管在Google CDN上。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

作为旁注，虽然您可以使用.fadeTo（）；

.fadeTo（）需要持续时间和不透明度作为参数。a.e:

.fadeTo("slow", .5);

如果你想让它淡出到什么都不显示，你可以使用方法.fadeOut（）；并传递一个duration参数。a.e.:

.fadeOut("slow");

编辑：当我第一次阅读脚本时，我的眼睛跳过了fadeTo方法中的0。我以为这就是问题所在。在通过jsfiddle抛出它之后，问题似乎是缺少库。

您没有链接jQuery。这意味着浏览器不知道jQuery是什么。你必须添加<script>标记。

在<head> 中使用以下内容

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Fiddle你的代码确实有效，只是一个简单的错误：）

您也可以使用.fadeOut()而不是.fadeTo()。它更简单。看看这里

因为我发布了一个答案，你可以用$(function () {作为$(document).ready(function(){的缩写。我知道这没有关系，只是提到了\_(ツ)_/

相关内容

最新更新

热门标签：