This sample demonstrates how to use different animation effects. The Animated property is used to change the animation effect.

The following expander animations are demonstrated:

• The first expander demonstrates default expand/collapse animation effect.
• The second expander demonstrates custom animation (custom1) with "easeOutExpo" easing and duration of 900ms.
• The third expander demonstrates custom animation(custom2) using jQuery effects. The "puff" effect is used as the expand animation and "explode" as the collapse animation.
• For the fourth expander animation is disabled. The Animated.Disabled property is set to True.

The following is implementation code for the custom1 and custom2 animations:

	<script id="script1" type="text/javascript">
		$(document).ready(function () {
			jQuery.wijmo.wijexpander.animations.custom1 = function (options) {
				this.slide(options, {
					easing: "easeOutExpo",
					duration: 900
				});
			}
			jQuery.wijmo.wijexpander.animations.custom2 = function (options) {
				if (options.expand)
					options.content.show("puff", options, 300);
				else
					options.content.hide("explode", options, 300);
			}
		});
	</script>

The following options(options parameter) are available for the animation function:

• expand - If True, the content element is expanded.
• horizontal - If True, the expander is horizontally orientated (when expandDirection is left or right).
• content - The jQuery object that contains content element to be expanded or collapsed.