Fork me on GitHub

Rob La Placa

Back to Choosing the right jQuery Easing function »

$.easingSelect - The Easing Select Plugin

A simple jQuery extension that injects a selectbox which contains all the available easing algorithms in the jQuery.easing object. The easing value can be grabbed from that while testing animations. Grab the latest code on github.

Example in Action

Code Snippet

<div class="square square-1"></div>

<script>
	var $square = $(".square-1"),
	SELECT_ID = "position-easing-type";

	// 1. Adds the easing select to the div
	// 2. On change callback wired up to the select
	// 3. On change, get the value of the easing select, 
	//    and incorporate into animation test
	$square.easingSelect(SELECT_ID, function() {
		var easingValue = $("#" + SELECT_ID).val(),
			animateDuration = 1000;

		$square.stop().animate({
			left: 500
		}, animateDuration, easingValue).animate({
			left: 0
		}, animateDuration, easingValue);
	});
</script>