Javascript特效之区域动画效果

Javascript特效之区域动画效果

今天来分享一个会移动的区域，这里需要用到JQuery的动画功能animate。看看效果：

图中方框会移动到右边后又移动回来。实现思路：利用JQuery动画效果控制区块的位置来回移动。

js代码：

$(document).ready(function(){
	$(".run").click(function(){
	
		$("#box").animate({opacity: "0.1", left: "+=400"}, 1200)
		.animate({opacity: "0.4", top: "+=160", height: "20", width: "20"}, "slow")
		.animate({opacity: "1", left: "0", height: "100", width: "100"}, "slow")
		.animate({top: "0"}, "fast")
		.slideUp()
		.slideDown("slow")
		return false;
	
	});
});