back to Overview

.toggle()

Creates a function that switches between the two given states for the list.
Web module only.

Syntax Variants

list.toggle(cssClasses)
list.toggle(state1, state2)
list.toggle(state1, state2, durationMs)
list.toggle(state1, state2, durationMs, linearity)
list.toggle(state1, state2, durationMs, interpolationFunction)

Parameters

cssClasses
a string containing space-separated CSS class names to toggle. Classes are disabled in the first state and enabled in the second.
state1
a property map in set() syntax describing the initial state of the properties. The properties will automatically be set when the toggle() function is created. 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, like the other state.
durationMs (optional)
if set, the duration of the animation in milliseconds. By default, there is no animation and the properties will be changed immediately.
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) for the animation 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 toggle function function(newState) that will toggle between the two states, or set a specific state.
newState (optional)
If a boolean true or false is given, the toggle will set the first or second state respectively. If called with any other value, or without a value, the function toggles to the other state.

Description

Creates a function that switches between the two given states for the list. The states use the set() property syntax. You can also just pass a string of CSS classes, as you do with set().

If no duration is given, the returned function changes the state immediately using set(). If a duration has been passed, the returned function uses animate() to smoothly transition the state. If the returned function is invoked while an animation is running, it interrupts the animation and returns to the other state.

Example

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

var light = $('body').set({$backgroundColor: #000}, {$backgroundColor: #fff});
light();      // toggles state to second state
light(false); // sets first state (background color to #000).
light(true);  // sets second state (background color to #fff).
light();      // toggles state to first state

Example

Takes the previous function, but adds it as an onclick event handler that toggles the color. 

var light = $('body').toggle({$backgroundColor: #000}, {$backgroundColor: #fff});
$('#mySwitch').on('click', light);

Example

Using an animated transition by passing a duration: 

var dimmer = $('body').toggle({$backgroundColor: #000}, {$backgroundColor: #fff}, 500);
$('#mySwitch').on('click', dimmer);

Example

Toggling CSS classes using the full syntax: 

var t = $('#myElement').toggle({$: '-myClass1 -myClass2'}, {$: '+myClass1 +myClass2'});
$('#myController').on('click', t);

Example

There is a shortcut for toggling CSS classes. Just list them space-separated in a string: 

var t = $('#myElement').toggle('myClass1 myClass2');

See also..

  • dial() is a similar function that allows you to smoothly interpolate between two states.

Comments

comments powered by Disqus

back to Overview

Functions