jQuery mouseenter和fadeTo问题

我正在做codeacademy.com jQuery课程，以便在阅读jQuery In Action书籍之前获得jQuery的美味，并且我必须有一部分代码不起作用我不明白为什么。

jQuery mouseenter和fadeTo问题

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

这些都是说明从codeacademy.com：

太好了！接下来，让我们将我们的函数关键字和两个新的动作包括在一起，即mouseenter（）和fadeTo（）。你可能期望的是：mouseenter（）会在你的鼠标进入给定的HTML元素时产生变化。例如，

$（文件）。就绪（函数（）{。。 $（ 'DIV'）的mouseenter（函数（）{ $（ 'DIV'）隐藏（）; }）;} ）;只要将鼠标移到页面上，就会隐藏页面上的所有内容。（我们将在下一课中发现如何影响众多人中的一人。）现在，我们只有一个，所以这个设置没问题。

然而，我们会将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); 
}); 
});

感谢。

来源

2012-12-19 number8pie

这里是炒锅小提琴。 http://jsfiddle.net/weacY/5/ – bipen

谢谢！你能告诉我我做错了什么吗？我会赞成并接受你的回答。编辑 - 对不起，没有看到下面的答案 – number8pie

因为在JSFiddle中默认设置了MooTools库。将其更改为jQuery和它的工作：

enter image description here

来源

2012-12-19 09:34:06 VisioN

**演示：** http://jsfiddle.net/weacY/1/。 – VisioN

再次感谢VisioN，嗯，这是奇怪的，它必须是codeacademy.com网站。 – number8pie

你在包括Mootools而不是jQuery在小提琴中。 Here's你的一把叉子。

来源

2012-12-19 09:34:02

默认情况下MooTools的图书馆中加载的mootools的JS拨弄选择。选择onLoad选择框旁边的jquery，它会加载jquery的js。

这里是工作小提琴。

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

包括jquery，它会运行

来源

2012-12-19 09:36:22 bipen

你没有在顶部有一个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-19 09:37:28 Jai

jQuery mouseenter和fadeTo问题

回答

相关问题