javascript - 使用 jquery ui 在 jquery 中设置动画(文本)颜色

Question

<!-- 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>

我正在尝试为这段代码制作动画，以便文本在悬停时变为黑色，而在离开该区域时变为白色。为什么这不起作用？

Answer 1

首先加载 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/ -- 如果您使用 jQuery 1.7.2。

jsFiddle 不允许我使用 jQuery 1.8.0 选择 jQuery UI 1.8.18，so apparently it's not compatible with that version .根据 jQuery-UI 网站，“ 1.8.23 fixes all known issues with jQuery 1.8.0”。