[jquery]animate

jqueryのanimateについてデモ

「jquery.animate.html」をダウンロード

「jquery.animate.html.txt」をダウンロード

「jquery.animate.02.html」をダウンロード

「jquery.animate.02.html.txt」をダウンロード

//ボックス１を400px移動
$('#box_1').click(function(){
$('#box_1').animate({
'top':'400px'
});
});

//ボックス２をslowで移動
$('#box_2').click(function(){
$('#box_2').animate({
'top':'400px'
},'slow');
});

//ボックス３をswingで２秒かけて移動
$('#box_3').click(function(){
$('#box_3').animate({
'top':'400px'
},2000,'swing');
});

//ボックス４をlinearで２秒かけて移動
$('#box_4').click(function(){
$('#box_4').animate({
'top':'400px'
},2000,'linear');
});

$('#reset').click(function(){
$('#box_1').css({'top':'','left':''});$('#box_2').css({'top':'','left':''});
$('#box_3').css({'top':'','opacity':1.0});$('#box_4').css({'top':'','opacity':'1.0','display':'block'});
});

$("#go4").click(function(){
  $("div").css({width:"", fontSize:"", borderWidth:""});
});

//ボックス１を右下へ移動
$('#box_1').click(function(){
$('#box_1').animate({
'top':'400px',
'left':'320px'
});
});

//ボックス２をクリックの回数分移動
$('#box_2').click(function(){
$('#box_2').animate({
'top':'+=20px',
'left':'-=20px'
},'2000');
});

//ボックス３をswingで２秒かけて移動して透過0.0付ける
$('#box_3').click(function(){
$('#box_3').animate({
'top':'400px',
'opacity': 0.0
},2000,'swing');
});

//ボックス４をlinearで２秒かけて移動toggle
$('#box_4').click(function(){
$('#box_4').animate({
'height': 'toggle',
'top':'400px',
'opacity': 'toggle'
},2000,'linear');
});

toggleは内部的には
CSSで　display:noneになっているので
display:none→blockなりinlineでリセットされる