如何在 jQuery 手风琴动画中设置“down”属性？

Question

根据jQuery UI的官方API文档，我们可以设置'down'属性来进行动画效果。

支持多种类型:

• 布尔值: false表示禁用动画效果。
• 数字: 使用默认缓动效果的毫秒数。
• 字符串: 使用默认持续时间的缓动名称。
• 对象: 包含缓动和持续时间属性以配置动画效果的对象。
  • 也可以包含一个down属性，该属性可以使用上述任何选项。
  • “Down”动画是指在激活的面板的索引比当前激活的面板低时发生的动画效果。

如果我有以下代码：

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

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

我该如何真正设置“down”属性？

- Zhe Hou

---

这个问题是关于如何使用“down”属性的。您需要垂直动画面板吗？还是想控制缓动的方向？请确认您需要此属性执行的操作，以便我们可以提供正确的解决方案。 - cssyphus

谢谢，@gibberish！就像JQuery文档所说的那样，我想配置当被激活的面板具有比当前活动面板更低的索引时的行为。 - Zhe Hou

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>

- redbmk

---

感谢您的回答！ - Zhe Hou