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.
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>
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>
You have to fulfill requirements for both types of animations to use combination of them.
Below is full list of supported attributes used to control animation of an element.
Specifies when should animation of an element start.
Specifies direction of movement of animated element.
Offset (of property determined by data-moveDirection) of animated element (relative to final position set via css). Any unit is acceptable - px, %, em, etc. Value without specified unit is treat as pixel unit (px). Using of relative unit is highly recommended to achieve responsive animated elements.
Specifies whether the animated element should be displayed using fadeIn animation.
Amount of time (in milliseconds) for which animation is delayed.
Easing function used for animation. jQuery library offers only two functions - 'swing' and 'linear' but you can use jQuery easing plugin to extend list of the functions. This plugin is included in all provided demos.
jAccordion by maniacpc, exclusively for CodeCanyon