Morph Functions in MRlib

In each of the following, millis_morph is the number of milliseconds from the start to the end of the morph; millis_delay is the number of milliseconds before the morph starts. Timings are based on JavaScript setTimeout() methods, which are approximate. For multiple simultaneous morphs, test in your slowest devices / browsers. (MSIE on the desktop.)

`morph_background_color()`

morph_background_color( element, start_color, end_color, millis_morph, millis_delay ) )

Morph background color. Colors must be "#rrggbb" format. See Color Functions for rgb to hex to rgb conversions.

`morph_border_color()`

morph_border_color( element, start_color, end_color, millis_morph, millis_delay ))

Morphs border color. Morphs the borderColor style. Individual borders (left, top, etc.) must not be set. Colors must be "#rrggbb" format. See Color Functions for rgb to hex to rgb conversions.

`morph_border_radii()`

morph_border_radii(element, start_horz_radius, start_vert_radius, end_horz_radius, end_vert_radius, millis_morph, millis_delay )

Morph horizontal and vertical radii (for whole element, not for individual corners). Specify radii as numbers of pixels (no suffix). 'px' will be appended before assigning to styles.

`morph_change_specs()`

morph_change_specs( element, change_specs, millis_morph, millis_delay )

Morphs based on 'change_specs'.

The 'change_specs' are an object: {style0: change0, style1: change1, ... }.

The changes are 'start;end' strings: 'start_value;end_value'.

The values supported are:

number: 'opacity: "0.0;0.5"'
pixels: 'width: "100px;200px"'
colors: 'backgroundColor: "#a0a0ff;#f0f0ff"'
two_px: 'borderRadius: "20px / 40px;30px / 50px"' */

`morph_opacity()`

morph_opacity( element, start_opacity, end_opacity, millis_morph, millis_delay )

Morph from one opacity to another. Opacity is specifed per the standards as a number from 0.0 (total transparency) to 1.0 (total opacity).

`morph_position()`

morph_position( element, start_left, start_top, end_left, end_top, millis_morph, millis_delay )

Morphs position. Specify positions as numbers (no suffix) of pixels. The 'px' suffix will be added internally.

`morph_px_style()`

morph_px_style( element, style_name, start, end, millis_morph, millis_delay )

Morph any pixel-measured style (top, left, height, width, borderWidth, margin, padding, etc.).

`morph_size()`

morph_size( element, start_width, start_height, end_width, end_height, millis_morph, millis_delay )

Morph size. Supply numbers (no suffixes). 'px' will be added internally.

`morph_size_loc()`

morph_size_loc( element, start_width, start_height, start_left, start_top, end_width, end_height, end_left, end_top, millis_morph, millis_delay )

Morph size and location. Supply numbers (no suffixes). 'px' will be added internally.

Feedback: MartinRinehart at gmail dot com

# # #