hs.transitions
Define transitions other than the default zoom in and out
The transitions property is an array with one or two items. The first item applies to opening or closing the expander on it's own. If a second parameter is given, this will apply when hs.previous or hs.next is called through links or key listeners. Valid transitions from version 3.3 are "expand" (default) and "fade". Using the fade transition looks good on HTML content, but it is processor heavy and should be used with care for image expanders. For version 4.0 a "crossfade" transition is planned, and this will be designed to crossfade between images.
This is the way to define a transition with two levels:
hs.transitions = ["expand", "crossfade"];
Please note that crossfade is not yet supported by HTML expanders.
Details
| Requires |
transitions |
| Type |
array |
| Default value |
[] |
| Overrideable inline |
Yes |
Example
Example 1: Two image expanders with crossfade transition.
These thumbnails use a crossfade transitions between them, but an expand transition on opening and closing.
Put this in the head section of your page:
<script type="text/javascript">
hs.transitions = ["expand", "crossfade"];
</script>
Use the right and left arrow keys to navigate between the thumbnails and notice the crossfade:
Example 2: A HTML expander with fade transition
Put this in the head section of your page:
<script type="text/javascript">
hs.transitions = ["fade"];
hs.outlineType = "rounded-white";
</script>
Tested on a HTML expander:
Click me
See also
