Highslide JS API Reference

Close Move
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam dapibus leo quis nisl. In lectus. Vivamus consectetuer pede in nisl. Mauris cursus pretium mauris. Suspendisse condimentum mi ac tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec sed enim. Ut vel ipsum. Cras consequat velit et justo. Donec mollis, mi at tincidunt vehicula, nisl mi luctus risus, quis scelerisque arcu nibh ac nisi. Sed risus. Curabitur urna. Aliquam vitae nisl. Quisque imperdiet semper justo. Pellentesque nonummy pretium tellus.
Resize

Object: hs

Variables

Functions

Events

Object: hs.Expander

Variables

Functions

Events



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

  1. 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.
  2. Extract the zip file into your highslide folder.
  3. 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.
  4. Include the file in your HTML page:
    <script type="text/javascript" src="highslide/easing_equations.js"></script>
  5. 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

New, Edit