| MVC Classic ウィジェット > Wijaccordion > アコーディオンへのアニメーションの適用 |
wijaccordion ウィジェットはアニメーションをサポートします。 この機能を利用するには、単に animated オプションを設定します。 Web サイト (http://demo.componentone.com/ASPNET/MVCExplorer/accordion/Animation) にアクセスし、MVC コントロールエクスプローラの Accordion > Animation サンプルのライブデモをご覧ください。.
div id="accordion"> 要素があることに注意してください。 ２つのペインにアニメーションを設定し、他の２つのペインではアニメーションを無効にします。
| ソースビュー |
コードのコピー
|
|---|---|
<div id="accordion">
<h3>セクション 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>セクション 2</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>
</div>
<div id="accordion2">
<h3>
セクション 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>
</div>
<h3>
セクション 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>
</div>
</div>
|
|
| ソースビュー |
コードのコピー
|
|---|---|
<script id="scriptInit" type="text/javascript">
$(document).ready(function () {
$("#accordion").wijaccordion({
animated: "easeInOutBounce", duration: 700,
});
$("#accordion2").wijaccordion({
animated: false
});
});
</script>
|
|