1 
<!-- include Google's AJAX API loader -->
<script src="http://www.google.com/jsapi"></script>
<!-- load JQuery and UI from Google (need to use UI to animate colors) -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
$("#menuknop1").hover(function() {
    $(this).animate({"color":"black"}, "slow");
}, function() {
    $(this).animate({"color":"white"}, "slow");
});

});
</script>

<div id="menuknop1"><i>Home</i></div>

このコードをアニメーション化して、ホバーするとテキストが黒くなり、領域を離れると白くなります。なぜこれが機能しないのですか？

4

1 に答える 1

2

最初にjQueryをロードします-jQuery-UIはプラグインであり、jQuery自体は含まれていません。

<!-- load JQuery and UI from Google (need to use UI to animate colors) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>

それを除けば、コードはここで問題なく機能します：http: //jsfiddle.net/mblase75/pMeJc/-jQuery1.7.2を使用している場合。

jsFiddleではjQuery1.8.0でjQueryUI1.8.18を選択できないため、そのバージョンとは互換性がないようです。jQuery-UI Webサイトによると、「1.8.23はjQuery1.8.0に関するすべての既知の問題を修正します。」

于 2012-08-29T18:55:17.477 に答える