Jquery-Animated Round Divs的问题

Question

SO，

冒着在论坛上“悬停动画问题”迷失方向的风险，请点击此处：

我正在为着陆页开发一系列悬停动画按钮。他们的悬停状态是一个圆形的div：

初始/“mouseoff”状态是没有div的颜色动画文本：

我有一个JSfiddle带有一个脚本来设置div的背景颜色，以便当光标在它上面时它会变淡到棕色，但是我觉得我在语法上忽略了一些东西，因为它没有似乎正在生效：

<script type="text/javascript">
  $(document).ready(function(){
    $(".corners").hover(function() {
      $(this).stop().animate({ backgroundColor: "#fff"}, 'fast');
    },
    function() {
      $(this).stop().animate({ backgroundColor: "#8B5E3C"}, 'fast');
    });
  });
</script>
<div class="corners"> 
    <div class="cornertext">Main Site</div> 
</div>
<div class="corners"> 
    <div class="cornertext">Mobile</div> 
</div>

一旦我找到了这个属性，我的目标是设置一个同时改变字体颜色的功能，但首先我必须确定DIV颜色动画有什么问题。来自SO的人才的帮助会很棒！

-Marca

Answer 1

您忘了包含ui库。我有一个有效的演示here。在包含jquery之后，请确保包含the library。

另请参阅here了解有关.animate()

扩展的详细信息