配置 jQuery 的颜色动画效果

是否有一种有效的方法来使用jQuery的标准颜色动画效果来创建一个可折叠部分，默认情况下，该部分仅显示H3标签，但然后将扩展和折叠"效果"div和折叠使用工具的标准功能？

这是jQuery网站的示例代码，我想在此示例中使用：

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Effects - Animate demo</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
.toggler { width: 500px; height: 200px; position: relative; }
#button { padding: .5em 1em; text-decoration: none; }
#effect { width: 240px; height: 170px; padding: 0.4em; position: relative; background: #fff; }
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
  var state = true;
 $( "#button" ).on( "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;
  });
   } );
  </script>
 </head>
 <body>
 <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>

   </body>
   </html>

理想情况下，我希望看到使用这种效果，以便只有带有"动画"一词的H3标签显示，直到有人单击按钮以切换效果为止。感谢您的时间和见解！

问：

Wyattburp86

在文档准备就绪上或愿意时会在文档上添加 .hide();。然后在按钮单击事件中，将.show();添加到文本元素。

工作示例：-https：//jsfiddle.net/6f2dqd0g/6/

更多信息（W3S）：https：//www.w3schools.com/jquery/jquery_hide_show.asp

相关内容

最新更新

热门标签：