动画未按预期工作[重复]

Posted 2023-05-08

【中文标题】动画未按预期工作[重复]

【英文标题】：Animate not working as expected [duplicate]

【发布时间】：2015-12-20 13:51:42

【问题描述】：

这是我的 jQuery 函数：

var flashField = function ($field) 
    var colour = $field.css('background-color'); // gets colour ok
    $field.css( 'backgroundColor', '#FF0000' ); // sets background ok
    $field.animate( 'backgroundColor': colour , 1500); // nada

我想抓取元素的当前背景，将其切换为红色，然后淡化回原来的颜色。

但是animate 函数没有执行任何操作，控制台中也没有显示任何错误。

我做错了什么？已尝试搜索，但找不到任何显示错误语法或其他内容的内容。

（在 Chrome 45.0.2454.93 m 中测试）

【问题讨论】：

你能创造出你目前所拥有的小提琴吗？

可以加个jsfiddle吗？

@RejithRKrishnan 我没想到你会这样！ :P

@PraveenKumar 哈哈。我太懒了，不想读了。 :P

我知道你的意思 - 4 行代码 - 谁有时间？？

【参考方案1】：

您需要使用jquery-ui.js 为颜色设置动画。来自documentation：

jQuery UI 捆绑了 jQuery Color 插件，这些插件提供了颜色动画以及许多用于处理颜色的实用函数。

  $(function() 
    var state = true;
    $("#button").click(function() 
      if (state) 
        $("#effect").animate(
          backgroundColor: "#aa0000",
          color: "#fff",
          width: 500
        , 1000);
       else 
        $("#effect").animate(
          backgroundColor: "#fff",
          color: "#000",
          width: 240
        , 1000);
      
      state = !state;
    );
  );

.toggler 
  width: 500px;
  height: 200px;
  position: relative;

#button 
  padding: .5em 1em;
  text-decoration: none;

#effect 
  width: 240px;
  height: 135px;
  padding: 0.4em;
  position: relative;
  background: #fff;

#effect h3 
  margin: 0;
  padding: 0.4em;
  text-align: center;

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div class="toggler">
  <div id="effect" class="ui-widget-content ui-corner-all">
    <h3 class="ui-widget-header ui-corner-all">Animate</h3>
    <p>
      Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
    </p>
  </div>
</div>

<button id="button" class="ui-state-default ui-corner-all">Toggle Effect</button>

【讨论】：

谢谢 - 现在阅读...

@bukko 我已经用示例代码更新了我的答案。

感谢代码，但我需要的只是有关 jQuery UI 的线索。谢谢:)

哇不耐烦了！好吧好吧...

@bukko 哈哈...对不起...:D