在线HTML编辑器 - BootWiki.com

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI 特效 - Easing 比较演示</title>
	<link href="//cdn.staticfile.net/jqueryui/1.10.4/css/jquery-ui.min.css" rel="stylesheet">
	<script src="//cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
	<script src="//cdn.staticfile.net/jqueryui/1.10.4/jquery-ui.min.js"></script>
	<style>
	body {
		font-size: 62.5%;
		font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif";
	}
	#tracks {
		margin: 0 150px;
	}
	#tracks div {
		border: 2px solid #eee;
		padding: 8px;
		height: 20px;
		margin: 14px;
		position: relative;
		font-size: 1.1em;
	}
	#tracks .box {
		padding: 5px;
		left: 5px;
		width: 10px;
		height: 10px;
		position: absolute;
		background: red;
		border-radius: 50%;
	}
	#tracks .label {
		padding-left: 24px;
		font-size: 1.1em;
		line-height: 20px;
	}
	</style>
	<script>
	$(function() {
		function addEasing( easing ) {
			var box = $( "<span>" )
				.addClass( "box" )
				.data( "easing", easing );
			var label = $( "<span>" )
				.addClass( "label" )
				.text( easing );
			$( "<div>")
				.append( box )
				.append( label )
				.appendTo( tracks );
		}

var addForm = $( "#add-easing" ),
			addSelect = addForm.find( "select" ),
			tracks = $( "#tracks" ),
			startButton = $( "#start-race" );

$.each( $.easing, function( name ) {
			$( "<option>" ).text( name ).appendTo( addSelect );
		});
		addSelect.change(function() {
			addEasing( this.value );
		});

addForm.submit(function( event ) {
			event.preventDefault();
			addEasing( addSelect.val() );
		});

tracks.on( "click", "div", function() {
			$( this ).remove();
		});

startButton.click(function() {
			tracks.find( "span" ).each(function() {
				var car = $( this );
				car
					.stop( true, true )
					.css({
						left: 5
					})
					.animate({
						left: tracks.width() - car.width() - 50
					}, 2500, car.data( "easing" ) )
					.delay( 300 )
					.animate({
						left: 5
					}, 2500, car.data( "easing" ) );
			});
		});

addEasing( "linear" );
		addEasing( "swing" );
		addEasing( "easeOutBounce" );
	});
	</script>
</head>
<body>

<div id="add-easing">
	请在这里选择一个 easing，点击下面的轨道进行移除
	<select ></select>
</div>

</body>
</html>