横移動

下の灰色ボックスをオンマウスすると動きます。

$('#sample01 .animationBox').hover(function(){
	$('#box01').transition({ x: '40px' });
},
function() {
	$('#box01').transition({ x: '0' });
});

一回転

下の灰色ボックスをオンマウスすると動きます。

$('#sample02 .animationBox').hover(function () {
	$('#box02').transition({ rotate: '360deg' });
},
function () {
	$('#box02').transition({ rotate: '0deg' });
});

大きくする

下の灰色ボックスをオンマウスすると動きます。

$('#sample03 .animationBox').hover(function () {
	$('#box03').transition({ scale: 3 });
},
function () {
	$('#box03').transition({ scale: 1 });
});

3D回転

下の灰色ボックスをオンマウスすると動きます。

$('#sample04 .animationBox').hover(function () {
	$('#box04').transition({ rotate3d: '1,1,0,180deg' });
},
function () {
	$('#box04').transition({ rotate3d: '1,1,1,0deg' });
});

イージング

下の灰色ボックスをオンマウスすると動きます。

$('#sample05 .animationBox').hover(function () {
	$('#box05').transition({ x: '200px' },1000,'snap');
},
function() {
	$('#box05').transition({ x: '0' },1000,'snap');
});

基準点を変更して変形

下の灰色ボックスをオンマウスすると動きます。

$('#sample06 .animationBox').hover(function () {
	$('#box06').css({ transformOrigin: '20px 50px' })
	.transition({ rotate: '45deg' });
},
function() {
	$('#box06').transition({ rotate: '0deg' });
});

連続した動作

下の灰色ボックスをオンマウスすると動きます。

$('#sample07 .animationBox').hover(function () {
$('#box07')
	.transition({ rotate: '45deg' })
	.transition({ x : '140px'})
	.transition({ y : '40px'});
},
function() {
	$('#box07') .transition({ rotate: '0deg' })
	.transition({ x : 0})
	.transition({ y : 0});
});