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. Also note that the crossfade transition forces hs.preserveContent to be false on HTML expanders.
This is the way to define a transition with two levels:
hs.transitions = ["expand", "crossfade"];
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
