Animation

Animation with Easing

First

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.

Second

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.

Third

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.


Disabled Animation

First

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.

Second

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.

Third

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.


Custom Animation

First

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.

Second

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.

Third

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.

설명

이 샘플에서는 C1Accordion 컨트롤과 함께 여러 애니메이션 효과를 사용하는 방법을 설명합니다.

Animated 속성은 애니메이션 효과를 변경하기 위해 사용됩니다.

첫 번째 아코디언에서 Animated.Effect 속성은 감속/가속 효과를 변경할 수 있도록 "easeInOutCirc"로 설정되었습니다.

두 번째 아코디언에서 Animated-Disabled 속성은 True로 설정되고 애니메이션이 비활성화되었습니다.

세 번째 아코디언에서는 사용자 지정 애니메이션 효과를 사용합니다. Animated.Effect 속성이 "custom1"로 설정되었습니다. "custom1" 효과는 다음 클라이언트 측 스크립트를 사용하여 정의됩니다. _x000D_

	$(document).ready(function () {
		jQuery.wijmo.wijaccordion.animations.custom1 = function (options) {
			this.slide(options, {
				easing: options.down ? "easeOutBounce" : "swing",
				duration: options.down ? 1000 : 200
			});
		}
	});	

애니메이션 함수에 사용 가능한 옵션(options 매개 변수)은 다음과 같습니다.

  • down - True일 경우, 이는 축소되어야 하는 창의 인덱스보다 크게 창의 인덱스를 확장해야 함을 나타냅니다.
  • horizontal - True일 경우, 이는 아코디언이 가로 방향(expandDirection이 왼쪽 또는 오른쪽인 경우)임을 나타냅니다.
  • rightToLeft- True일 경우, 이는 콘텐츠 요소가 머리글 요소 앞에 위치(위쪽 및 왼쪽 확장 방향)함을 나타냅니다.
  • toShow - 표시되어야 하는 콘텐츠 요소를 포함하는 jQuery 개체입니다.
  • toHide - 숨겨야 하는 콘텐츠 요소를 포함하는 jQuery 개체입니다.
도움말