如何将 'down' 属性 设置为 Jquery 手风琴动画？
How to set 'down' property to Jquery accordion animate?
根据jQuery UI's formal API document，我们可以设置'down' 属性来做动画。
Multiple types supported:
- Boolean: A value of false will disable animations.
- Number: Duration in milliseconds with default easing.
- String: Name of easing to use with default duration.
- Object: An object containing easing and duration properties to configure animations.
- Can also contain a down property with any of the above options.
- "Down" animations occur when the panel being activated has a lower index than the currently active panel.
如果我有这样的代码：
var accOpts = {
easing: "linear",
duration: "fast",
}
#("#accordion").accordion({
animate: accOpts,
});
如何才能真正设置'down'属性？
您可以使用布尔值、数字、字符串或对象，就像您传递给 animate 一样。您只需将它作为 属性 添加到您的 accOpts 对象。例如，如果将其设置为 1000，则向后退时需要 1 秒，而不是向前时 "fast"。我展示了一个带有对象的示例，并在注释中添加了一些变体。
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>
根据jQuery UI's formal API document，我们可以设置'down' 属性来做动画。
Multiple types supported:
- Boolean: A value of false will disable animations.
- Number: Duration in milliseconds with default easing.
- String: Name of easing to use with default duration.
- Object: An object containing easing and duration properties to configure animations.
- Can also contain a down property with any of the above options.
- "Down" animations occur when the panel being activated has a lower index than the currently active panel.
如果我有这样的代码：
var accOpts = {
easing: "linear",
duration: "fast",
}
#("#accordion").accordion({
animate: accOpts,
});
如何才能真正设置'down'属性？
您可以使用布尔值、数字、字符串或对象，就像您传递给 animate 一样。您只需将它作为 属性 添加到您的 accOpts 对象。例如，如果将其设置为 1000，则向后退时需要 1 秒，而不是向前时 "fast"。我展示了一个带有对象的示例，并在注释中添加了一些变体。
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>