back to Overview

.dial()

Creates a function allows you to set all list members to one of two states or any transitional state between them.
Web module only.

Syntax Variants

list.dial(state1, state2)
list.dial(state1, state2, linearity)
list.dial(state1, state2, interpolationFunc)

Parameters

state1
a property map in set() syntax describing the first state of the properties. The properties will be set for all elements of the list.
state2
a property map describing the second state of the properties. Uses set() syntax.
linearity (optional)
defines whether the animation should be linear (1), very smooth (0) or something in between. Default: 0. Ignored if durationMs is 0.
interpolationFunc (optional)
an interpolation function(startValue, endValue, t) which will be called every time an interpolated value is required:
startValue
The start value of the transition.
endValue
The end value of the transition.
t
A value between 0 and 1 that specifies the state of the transition.
(callback return value)
The value at the time t.
(return value)
a dial function function(newPosition) that will set the state.
newPosition
If 0 or lower, set the list members to the first state. If 1 or higher, sets them to the second state. For any value betweeen 0 and 1, the list members will be set to interpolated values.

Description

Creates a function allows you to set all list members to one of two states or any transitional state between them. The states are specified using set() - compatible object maps containing the properties to set. Pass 0 to the function to set the first state for all list members, or 1 to set the second state. Any value between 0 and 1 will cause dial() to interpolate between the two states. Interpolation is supported for all numeric values, including those that have a string suffix (e.g. 'px' unit), and for colors in all RGB notations (e.g. '#f00', '#f0d1ff' or 'rgb(23,0,100)').

You can use the optional third parameter to define the kind of interpolation to use for values between 0 and 1. If 0, the dial uses a smooth, cubic interpolation. For 1 it uses linear interpolation. Values between 0 and 1 will mix both algorithms. You can also specify your own interpolation function.

Example

Creates a dial function that changes the background color of the page. 

var light = $('body').dial({$backgroundColor: #000}, {$backgroundColor: #fff});
light(0);     // set the first state (background color to #000)
light(1);     // sets second state (background color to #fff).
light(0.5);  // interpolates between two states, sets background color to #888.
light(0.25);  // interpolates between two states, sets background color to #444.

See also..

  • toggle() is a related function that allows you to define two states and automatically animate between them.

Comments

comments powered by Disqus

back to Overview

Functions