Table of contents:

• What animated element is
• Default animated elements
• Requirements
  • Fade-in animation
  • Position animation
  • Combination of fade-in and position animation
• Animated elements attributes

Animated element is an HTML element placed inside a slide with additional attributes (see List of attributes) which specify details of animation. jAccordion offers fadeIn and position animation which start on specific occasion, i.e. when 1 of 3 jAccordion event is triggered (onSlideStartOpening, onSlideOpened and onSlideStartClosing).

jAccordion offers 3 css classes which are supposed to be used for animated elements (you can of course use any class you want) - title (displayed when slide is closed), description and caption (both displayed when slide is open). These classes are defined in default.css stylesheet and elements with one of these classes are appropriately displayed/hidden even if js is disabled. I recommend to add these classes to headings (h1, h2 and h3) because font size of headings is automatically resized according to screen size (not supported by ie7 and ie8). Responsive headings are defined in .css file so it's easy to add other responsive elements.

As you probably noticed basically any element inside a slide can be animated, nevertheless there are few conditions which you should follow when creating animated elements.

Fade-In animation

At least 2 attributes have to be specified to use fade-in animation - data-initEvent (with 1 of values onSlideStartOpening, onSlideStartClosing or onSlideOpened) and data-fade (with value true).

Example of 3 elements (caption, title, description) using fade-in animation:

<!--Animation starts as soon as slide starts opening-->
<h1 class="caption" data-initEvent="onSlideStartOpening" data-fade="true">This is a caption.</h1>
<!--Animation starts as soon as slide starts closing-->
<h1 class="title" data-initEvent="onSlideStartClosing" data-fade="true">This is just a title.</h1>
<!--Animation starts as soon as slide is completely open-->
<div class="description" data-initEvent="onSlideOpened" data-fade="true">
	<h1>Lorem ipsum dolor</h1>
	<p>This is div with class description containing h1 and p elements.</p>
</div>

Position animation

At least 3 attributes have to be specified to use position animation - data-initEvent (with 1 of values onSlideStartOpening, onSlideStartClosing or onSlideOpened), data-moveDirection (with 1 of values top, right, bottom or left) and data-offset. Animated element has to be absolutely or relatively positioned.

Example of 3 elements (caption, title, description) using position animation:

<!--Animation starts as soon as slide starts opening - element is (and has to be) absolutely positioned-->
<h1 class="caption" data-initEvent="onSlideStartOpening" data-moveDirection="top" data-offset="15%" style="top: 30%;left: 25%;">
	This is just a caption.
</h1>
<!--Animation starts as soon as slide starts closing - element is (and has to be) absolutely or relatively positioned-->
<h1 class="title" data-initEvent="onSlideStartClosing" data-moveDirection="top" data-offset="30%">
	This is just a title.
</h1>
<!--Animation starts as soon as slide is completely open - element is (and has to be) absolutely or relatively positioned-->
<div class="description" data-initEvent="onSlideOpened" data-moveDirection="bottom" data-offset="-25%">
	<h2>This is title of description</h2>
	<p>This is div with class description containing h2 and p elements.</p>
</div>

Combination of fade-in and position animation

You have to fulfill requirements for both types of animations to use combination of them.

• Element has to be absolutely or relatively positioned.
• data-initEvent - with 1 of values onSlideStartOpening, onSlideStartClosing or onSlideOpened
• data-moveDirection - with 1 of values top, right, bottom or left
• data-offset
• data-fade - with value true

Below is full list of supported attributes used to control animation of an element.