1

在阅读 jQuery In Action 书之前，我正在学习 codeacademy.com jQuery 课程，以便对 jQuery 有一个很好的了解，我已经完成了一部分并且代码不起作用，我不明白为什么。

我在这里创建了一个 jsFiddle http://jsfiddle.net/weacY/

这些是来自 codeacademy.com 的说明：

伟大的！接下来，让我们将 function 关键字和两个新动作组合在一起，mouseenter() 和 fadeTo()。

mouseenter() 做了您可能期望的事情：当您的鼠标进入给定的 HTML 元素时，它会产生变化。例如，

$(document).ready(function() { $('div').mouseenter(function() { $('div').hide(); }); }); 只要您将鼠标悬停在页面上，就会隐藏页面上的所有内容。（我们将在下一课中了解如何影响众多中的一个。）现在，我们只有一个，所以这个设置是可以的。

然而，我们将把 fadeTo() 放在 mouseenter() 中，而不是 hide()。fadeTo() 在括号之间接受两个参数或输入，用逗号分隔：淡入淡出的速度和淡入淡出的不透明度（或透明度）。例如，

fadeTo('fast', 0.25); 会迅速将目标元素淡化到其原始不透明度的 25%，使其颜色非常浅。

使用上面的例子，当你的鼠标进入'div'时，你的'div'会淡化为1（100％）不透明度。使动画速度“快”。（确保按顺序给fadeTo() 输入——速度，然后是不透明度。）

将鼠标悬停在您的“div”上即可查看效果！

这是HTML：

<html>
 <head>
  <title>Button Magic</title>
  <link rel='stylesheet' type='text/css' href='stylesheet.css'/>
 </head>
 <body>
  <div><br/><strong>Click Me!</strong></div>
  <script>type="text/javascript" src="script.js"</script>
 </body>
</html>​

这是CSS：

div {
 height: 60px;
 width: 100px;
 border-radius: 5px;
 background-color: #69D2E7;
 text-align: center;
 color: #FFFFFF;
 font-family: Verdana, Arial, Sans-Serif;
 opacity: 0.5;
}​

最后是 jQuery：

$(document).ready(function() {
 $("div").mouseenter(function() {
  $("div").fadeTo("fast", 1);
 });
});​

提前感谢您的帮助。

4

4 回答 4

6

因为在 JSFiddle MooTools 库中是默认设置的。将其更改为 jQuery，它将起作用：

在此处输入图像描述

于 2012-12-19T09:34:06.703 回答
3

您没有顶部的 jquery 插件：

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script>
<script>
    $(document).ready(function() {
        $("div").mouseenter(function() {
            $("div").fadeTo("fast", 1);
        });
    });
</script>

在您的小提琴中，您没有从左侧下拉列表中选择 jQuery 插件。

看到这个小提琴：http: //jsfiddle.net/weacY/2/

于 2012-12-19T09:37:28.613 回答
2

你包括Mootools而不是jQuery小提琴。这是你的叉子。

于 2012-12-19T09:34:02.257 回答
2

默认情况下，MooTools 库在加载 mootools 的 js 的小提琴中被选中。在onLoad选择框旁边选择jquery，它将加载jquery的js。

这是工作小提琴。

http://jsfiddle.net/weacY/5/

包括jquery，它会工作..

于 2012-12-19T09:36:22.417 回答