Question

根据jQuery UI's formal API document，我们可以将'down'属性设置为动画。

支持多种类型：


布尔值：值为false将禁用动画。

数字：默认缓动的持续时间（以毫秒为单位）。

字符串：默认持续时间使用的缓动名称。

对象：包含缓动和持续时间属性的对象，用于配置动画。

还可以包含具有上述任何选项的down属性。

当激活面板的索引低于当前活动面板时，会出现“向下”动画。

如果我有这样的代码：

var accOpts = {
    easing: "linear",
    duration: "fast",
}

#("#accordion").accordion({
    animate: accOpts,
});

我怎样才能真正设置'down'属性？

Answer 1

您可以使用布尔值，数字，字符串或对象，就像传入animate一样。您只需将其作为属性添加到accOpts对象。例如，如果将其设置为1000，则向后移动时需要一秒钟，而在向前移动时则需要“快速”。我已经展示了一个带有对象的示例，并在一些变体中作为注释抛出。

var accOpts = {
  easing: "linear",
  duration: "fast",
  down: {
    easing: "easeInOutQuart",
    duration: 1000
  }
  
  //down: false
  //down: "easeInOutQuart"
  //down: 1000
}

$("#accordion").accordion({
  animate: accOpts,
});

<meta charset="utf-8">
<title>jQuery UI Accordion - Collapse content</title>
<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 id="accordion">
  <h3>Section 1</h3>
  <div>
    <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum
      a velit eu ante scelerisque vulputate.</p>
  </div>
  <h3>Section 2</h3>
  <div>
    <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.</p>
  </div>
  <h3>Section 3</h3>
  <div>
    <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam
      nisi, eu iaculis leo purus venenatis dui.</p>
    <ul>
      <li>List item one</li>
      <li>List item two</li>
      <li>List item three</li>
    </ul>
  </div>
  <h3>Section 4</h3>
  <div>
    <p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est.</p>
    <p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
  </div>
</div>

如何将'down'属性设置为Jquery手风琴动画？

1 个答案: