下の灰色ボックスをオンマウスすると動きます。
$('#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 });
});
下の灰色ボックスをオンマウスすると動きます。
$('#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});
});