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問題

回答

相關問題