Jquery中动画讲解

1.左上角的缩放效果

[JavaScript] 纯文本查看 复制代码

hide([speed,[fn]])

　　概述：隐藏显示的元素

　　参数：speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示 动画时长的毫秒数值(如：1000)

　　　　  fn:在动画完成时执行的函数，每个元素执行一次。

// $(":button[value=隐藏]").click(function(){
//	$("div").hide(2000,function(){
//	alert("div隐藏了");
//	});
//	})

show([speed,[fn]])

　　概述：显示隐藏的匹配元素。

// $(":button[value=显示]").click(function(){
//	$("div").show(2000,function(){
//	alert("div显示了");
//	});
//	})

toggle([speed],[fn])

　　概述：如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。

 // //toggle([speed],[fn]) 如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的
// $(":button[value=隐显]").click(function(){
//	$("div").toggle(2000);
//	})

 

2.上下的缩放效果

[JavaScript] 纯文本查看 复制代码

slideUp(speed, [callback])

　　概述：通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。

　　参数: speed 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000) callback (可选) 在动画完成时执行的函数

//slideUp(speed, [fn]) 通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数
// $(":button[value=隐藏]").click(function(){
//	$("div").slideUp(2000);
//	})

slideDown(speed, [callback])

　　概述：通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。

// //slideDown(speed, [fn]) 通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数
// $(":button[value=显示]").click(function(){
//	$("div").slideDown(2000);
//	})

slideToggle([speed],[fn])
　　概述：通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。

//slideToggle([speed],[fn]) 通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数
// $(":button[value=隐显]").click(function(){
//	$("div").slideToggle(2000);
//	})

3.淡入淡出效果（不透明度的变化）

[JavaScript] 纯文本查看 复制代码

fadeOut(speed, [callback])

　　概述：通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。

// $(":button[value=隐藏]").click(function(){
//	$("div").fadeOut(2000);
//	})

fadeIn(speed, [callback])

　　概述：通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。

$(":button[value=显示]").click(function(){
//	$("div").fadeIn(2000);
//	})

fadeToggle([speed,[fn]])

　　概述：通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数。

$(":button[value=隐显]").click(function(){
//	$("div").fadeToggle(2000);
//	})

fadeTo(speed,opacity,[fn])

　　概述：把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。

// $(":button[value=隐藏]").click(function(){
//	$("div").fadeTo(2000,0.5);
//	})

 

4.自定义动画

[JavaScript] 纯文本查看 复制代码

animate(params,[speed],[fn])

　　概述：用于创建自定义动画的函数。

//          $("div").animate({"left":"1000px"},2000);

 

stop([clearQueue], [gotoEnd])

　　概述：停止所有在指定元素上正在运行的动画。

　　参数： clearQueue (可选)如果设置成true，则清空队列。可以立即结束动画。

               gotoEnd (可选)让当前正在执行的动画立即完成。

// $(document).click(function(){
//	$("div").stop()
//	})

 

delay(duration)

　　概述：设置一个延时来推迟执行队列中之后的项目。

　　参数 duration 延时时间，单位：毫秒

//          $("div").delay(2000).animate({"left":"1000px"},2000);

现在前端都不玩jQuery。。前端现在玩jq都感觉掉档次。。jq是留给后台玩的了