hs.easing
Sets the style of the expand/contract effect.
From version 3.3.7 Highslide has two built-in easing options, easeInQuad and linearTween. While linearTween makes the image expand at a fixed rate, easeInQuad makes the image expand first slowly, then faster. Until version 3.3.7, the default easing was equivalent to linearTween.
The two built-in options can be supplemented by Robert Penner's Easing Equations, offering a variety of different effects. See the example below for how to install this.
The hs.easing applies to both opening and closing the expander unless hs.easingClose is set. To adjust the duration of the easing, adjust hs.expandDuration, hs.expandSteps, hs.restoreDuration and hs.restoreSteps.
Details
| Type |
string |
| Default value |
easeInQuad |
| Overrideable inline |
Yes |
Example
1) Installing Robert Penner's Easing Equations
- Go to www.robertpenner.com/easing and download "ActionScript 1.0 Equations". The library is published under a BSD licence, and has no link to the Highslide licence.
- Extract the zip file into your highslide folder.
- Your highslide folder now contains the file easing_equations.as. This is an ActionScript 1.0 file, but the syntax is ECMAScript and it works flawlessly with browsers. To prevent confusion you may want to rename it to easing_equations.js.
- Include the file in your HTML page:
<script type="text/javascript" src="highslide/easing_equations.js"></script>
- Too see what hs.easing alternatives you have, see Robert Penner's Equations Visualizer.
2) Setting the easing to linearTween
Put this in the head section of your page. This affects all expanders
<script type="text/javascript">
hs.easing = 'linearTween';
</script>
3) Easing demonstration
|
Default (easeInQuad):
|
easing: linearTween
|
easing: easeInCirc
|
easing: easeInQuad,
fadeInOut: true
|
| In the following examples expandDuration and restoreDuration is set to 500 and the corresponding steps to 20 to make the effect more pronounced: |
|
easing: easeInBack
|
easing: easeOutBack
|
easing: easeInBack,
easingClose: easeOutBack
|
easing: easeOutBack,
easingClose: easeInBack
|
See also
