Transition

Demo

An example jquery.transition in action.

Click the button below to begin trasitioning the box. Output is displayed in the code block to the right, and in your console:

No event

Installation

Manual installation

Reference the file in your project:

<script src="jquery.transition.js"></script>

Using Bower

bower install jquery.transition

Using NPM

npm install jquery.transition

Usage

Basic usage.

$(selector).on('transition', {

	// options.start - This method is executed when the element
	// begins transitioning, and is only executed once per
	// transition property
	// ***
	// Parameters:
	//   property[string] - the value of the CSS property that began to transition
	start : function( property ) {
		// ...
	},

	// options.progress - This method after the element has
	// begun transitioning, and fires every 15ms until
	// the transition is complete.
	// ***
	// Parameters:
	//   property[string] - the value of the CSS property that is currently transitioning
	//   duration[integer] - the amount of time, in milliseconds, since the transition started
	//   value[float|integer|string] - the current value of the CSS property currently transitioning
	progress : function( property, duration, value ) {
		// ...
	},

	// options.complete - This method is executed once
	// the transition has completed.
	// ***
	// Parameters:
	//   property[string] - the value of the CSS property that finished transitioning
	complete : function( property ) {
		// ...
	}
},

	// Event Callback - This callback function is
	// executed after all initial CSS transition-property
	// values have completed their transition phase. If
	// the event is unbound prior to that moment, this
	// callback will never be executed.
	// ***
	// Parameters:
	//   event[jQuery Event] - The default jQuery Event created during during initial setup
	function( evt ) {
		// ...
});

Options

All plugin & event options.

All options are set as the second parameter of the jQuery event-binding method .on(...). For more info on this method, read the documentation on jQuery's website.