machine.js
turn css selectors into state machines
machine.js is a simple plugin that will allow you to treat DOM elements as state machines. you apply the "machine" behavior to any DOM element and that element now has four states : entering, entered, exiting, exited
online demo - http://maraksquires.com/machine.js/
super simple jQuery stop light
// here we state that the content div is now a state machine
$('#content').machine({
entered: function( state ){
// when the content div has entered a new state
var color = state;
// assign the back-ground color of #content to the name of it's current state
$(this).css('background-color', color);
}
});
// here we define a click event for our buttons
$('button').click( function(){
// when a button is clicked, enter a new state based on the button's value
machine.enter( $(this).html() ); // optional second argument "context" will default to value "document"
});
...
<button>red</button>
<button>green</button>
<button>yellow</button>
<button>purple</button>
<div id="content"></div>