Question

这是我的jQuery函数：

animate

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

但define('AWS_KEY', 'xxxxxx'); define('AWS_SECRET_KEY', 'x+x/xxxxxxxx/'); define('AWS_CANONICAL_ID','xx'); define('AWS_CANONICAL_NAME', 'xxxxx'); $HOST = 's3.amazonaws.com'; require_once 'php_plugins/aws/v1/sdk.class.php'; $Connection = new AmazonS3(array( 'key' => AWS_KEY, 'secret' => AWS_SECRET_KEY, 'canonical_id' => AWS_CANONICAL_ID, 'canonical_name' => AWS_CANONICAL_NAME, )); $ListResponse = $Connection->list_buckets(); $Buckets = $ListResponse->body->Buckets->Bucket; foreach ($Buckets as $Bucket) { echo $Bucket->Name . "\t" . $Bucket->CreationDate . "\n"; $response = $Connection->list_objects($Bucket->Name); }函数没有做任何事情，控制台中也没有显示错误。

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

（在Chrome 45.0.2454.93 m中测试）

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

动画不按预期工作

1 个答案: