1

私は codeacademy.com の jQuery コースを受講して、jQuery In Action 本を読む前に jQuery を少し体験しましたが、ある部分まで進んでコードが機能せず、その理由がわかりません。

ここで jsFiddle を作成しましたhttp://jsfiddle.net/weacY/

これらは、codeacademy.com からの指示です。

すごい！次に、function キーワードと 2 つの新しいアクション、mouseenter() と fadeTo() を一緒に含めましょう。

mouseenter() は期待通りの動作をします: マウスが特定の HTML 要素に入ったときに変更を生成します。例えば、

$(document).ready(function() { $('div').mouseenter(function() { $('div').hide(); }); }); マウスオーバーするとすぐにページ上のすべてが非表示になります。(次のレッスンで、多くの中から 1 つだけに影響を与える方法を学びます。) 今のところ、 は 1 つしかないので、この設定で問題ありません。

ただし、hide() の代わりに、fadeTo() を mouseenter() 内に配置します。fadeTo() は、カンマで区切られた 2 つの引数、または入力を括弧内に取ります: フェードする速度と、フェードする不透明度 (または透明度) です。例えば、

fadeTo('速い', 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 の js をロードする fiddle で MooTools ライブラリが選択されます。onLoad 選択ボックスの横にある jquery を選択すると、jquery の js が読み込まれます。

ここに作業フィドルがあります。

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

含めるjqueryと動作します..

于 2012-12-19T09:36:22.417 に答える
2

フィドルのMootools代わりに含めていました。これがあなたのフォークです。jQuery

于 2012-12-19T09:34:02.257 に答える