単純なアニメーション

ここを押してスタート

$('#btn01').click(function(){
	$('#box01').animate({left: '350px'});
});

duration

ここを押してスタート

$('#btn02').click(function(){
	$('#box02').animate({left: '350px'}, {duration: 3000});
});

easing

ここを押してスタート

$('#btn03').click(function(){
	$('#box03').animate({left: '350px'},{duration: 3000, easing: 'easeInQuad'});
});

完了

ここを押してスタート

$('#btn04').click(function(){
	$('#box04').animate({left: '350px'},{duration: 3000, easing: 'easeInQuad', complete: function(){$(this).text('完了');}});
});

step

ここを押してスタート

0

$('#btn05').click(function(){
	$('#box05').animate({left: '500px'},{duration:1000, easing:'easeInOutQuart', complete: function(){$(this).text('完了');} ,step: function(now, fx){$('#steps').text(now)}});
});

queue

queueを指定していない状態

ここを押してスタート

queueを指定した状態

ここを押してスタート

$("#btn07").click( function(){
	$("#box07")
	.animate({width: '400px'},{duration: 1500, queue: false})
	.animate({height: '50px'},{duration: 500})
});

連続した動作

ここを押してスタート

$("#btn08").click( function(){
	$("#box08")
	.animate({width: '400px'},{duration: 1500})
	.animate({height: '50px'},{duration: 500})
	.animate({width: '50px'},{duration: 500})
});

2つの要素の連続した動作

ここを押してスタート

$("#btn09").click( function(){
	$('#box09').animate({left: '350px'},{duration: 2000, easing: 'easeOutQuad', complete: 
		function(){  
			$('#box10').animate({left: '300px',opacity: 0},2000, 'easeOutQuad');  
		}  
	});
});