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 so apparently it's not compatible with that version选择jQuery UI 1.8.18。根据jQuery-UI网站，“ 1.8.23 fixes all known issues with jQuery 1.8.0。”

使用jquery ui在jquery中设置动画（文本）颜色

1 个答案: