jQuery/animate()

animate(properties, [duration], [easing], [complete]

$("#sample1div").click(function(){
  $(this).animate({
	  marginLeft: "30px",
	  marginTop: "30px"
	},1000);
});

$("#sample2box").click(function(){
  $(this).animate({
    width: "150px",
    height: "150px",
    marginLeft: "10px"
  },1000);
});

$(function(){
  $("#sample3Div").click(function(){
  	$(this).animate({
  	  marginLeft: "+=5px",
  	  width: "-=3px"
  	},100);
  });
});

アニメーション

アニメーション

$(function(){
  $("#left").animate({
   	left: "100px",
   	top: "25px"
  },3000);
  $("#right").animate({
   	left: "101px",
   	top: "-24px"
  },3000);
});

var s5Obj = new Object();
s5Obj.duration = 1000;
s5Obj.easing = "linear";
s5Obj.complete = function (){
  alert("sample5")
}
$("#s5Btn").click(function(){
  $("#s5Div").animate({
	width:100, height:100
  }, s5Obj);
});
	

function s6Func(){
  $("#s6Div").animate({
	marginTop: "-=50px"
	}, 1000).animate({
	marginTop: "+=50px"
	}, 1000);
  setTimeout(s6Func, 2000);
}
	

function s7Func(){
  $("#s7Div").animate({
	left: "350px"
	}, 2000).animate({
	left: "-30px"
	}, 2000);
  setTimeout(s7Func, 4000);
}
	

function s8Func(){
  $("#s8Div").animate({
	opacity: "0.1"
	}, 1000).animate({
	opacity: "1"
	}, 1000);
  setTimeout(s8Func, 2000);
}
	

function s9Func(){
  $("#s9c1").animate({
  	width: "toggle",
  	height: "toggle"
  }, "slow", "swing", s9Func02
  );
}
function s9Func02(){
  $("#s9c2").animate({
  	width: "toggle",
  	height: "toggle"
  }, "slow", "linear", s9Func03
  );
}
function s9Func03(){
  $("#s9c3").animate({
  	width: "toggle",
  	height: "toggle"
  }, "slow", "swing"
  );
}