【问题标题】:Problems with Jquery-Animated Round DivsJquery 动画圆形 div 的问题
【发布时间】:2012-09-17 00:44:59
【问题描述】:

所以,

冒着迷失在论坛“悬停动画问题”之海中的风险,这里是:

我正在为着陆页开发一系列悬停动画按钮。它们的悬停状态是一个圆形的 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 的人才的帮助会很棒!

-马卡 ​

【问题讨论】:

  • 由于您可能没有看到我的答案,因为我删除了它(由于信息错误),所以我已经用正确的信息重新发布了它。

标签: jquery button html jquery-animate css


【解决方案1】:

您忘记包含 ui 库。我有一个工作演示here。确保在包含 jquery 之后包含 the library

有关.animate() 扩展的详细信息,另请参阅here

【讨论】:

  • 啊,谢谢代达罗斯!我完全忽略了作为 UI 的颜色转换。一个基于您的 JSfiddle 的问题 - 我已经对其进行了调整,因此 DIV 出现在悬停状态,但我的初始状态仍然显示 div(好像鼠标悬停状态直到光标悬停在它上面才会启动)。我是否需要更改功能的 JS 才能解决这个问题? JSfiddle jsfiddle.net/Koubenec/XSc7A/1
  • @Marcectura 实际上不是 js,而是 css。对于您的.corner 类,将background: 更改为#fff,这样初始渲染就如您所愿。
  • 代达罗斯,完成!非常感谢。我确实有一个后续问题 - 我尝试添加字体颜色动画。但是,我似乎也搞砸了。我真的表现出我对 Jquery 的无知,但如果你有兴趣,JSfiddle 就在这里jsfiddle.net/Koubenec/8vne5/7
  • @Marcectura 您当前的问题是您的object is structured wrong,对象的成员用逗号分隔,而不是分号。
猜你喜欢
  • 1970-01-01
  • 2019-07-21
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-11-28
  • 2016-02-14
相关资源
最近更新 更多