jQuery简单动画操作
我们都知道动画的功能，今天介绍几个简单的动画的操作
一、动画——显示跟隐藏
首先先写一个简单的页面
<button id="showbox">显示button>
<button id="hidebox">隐藏button>
<button id="showhidebox">显示或隐藏button>
<div id="box">div>
三个按钮，点击改变div的状态，简单给div设置个宽高跟背景色，方便我们观看效果
思路：
隐藏hide() 显示show() 显示或隐藏 toggle()
参数：
动画时间(“slow”,“normal”, “fast”) / 毫秒 ,
切换效果 默认是"swing"，可用参数"linear" ,
动画执行完成的回调函数
原理：动画原理width 、height、opacity、
margin、 padding 、 overflow:hidden ;
效果：display=“none” / display=""
下面是JQ代码
//隐藏
$("#hidebox").click(function(){
$("#box").hide(2000,function(){
console.log("--隐藏 动画完成---")
});
})
//显示
$("#showbox").click(function(){
$("#box").show(2000,function(){
console.log("--显示 动画完成---")
});
})
//显示或隐藏
$("#showhidebox").click(function(){
$("#box").toggle(2000,function(){
console.log("-- 动画完成---")
});
})
二、动画——滑入跟滑出
首先也是先写一个简单的页面
<button id="one">滑入button>
<button id="two">滑出button>
<button id="three">滑入或滑出button>
<div id="box">div>
三个按钮，点击改变div的状态，简单给div设置个宽高跟背景色，方便我们观看效果
思路：
滑入slideDown() 滑出slideUp() 滑入或滑出slideToggle()
动画过程原理： height 、 margin-top, margin-bottom 、padding-top、 padding-bottom
效果：display:none / diplay:""
下面是JQ代码
$("#two").click(function(){
$("#box").slideUp(10000);
})
$("#one").click(function(){
$("#box").slideDown(10000);
})
$("#three").click(function(){
$("#box").slideToggle();
})
三、动画——淡入跟淡出
首先也是先写一个简单的页面
<<button id="one">淡入button>
<button id="two">淡出button>
<button id="three">淡入或淡出button>
<button id="four">到透明度0.5button>
<div id="box">div>
四个按钮，点击改变div的状态，简单给div设置个宽高跟背景色，方便我们观看效果
思路：
淡入 fadeIn() 淡出 fadeOut() 淡入或淡出 fadeToggle() 到指定的透明度fadeTo()
动画过程原理： opacity
效果：display:none / diplay:""
下面是JQ代码
$("#two").click(function(){
$("#box").fadeOut(3000) //透明度 0
})
$("#one").click(function(){
$("#box").fadeIn(3000)// //透明度 1
})
$("#three").click(function(){
$("#box").fadeToggle(3000)//
})
$("#four").click(function(){
$("#box").fadeTo(2000,0.5)//
})
当然 既然是用jQuery做的效果，在页面别忘了引用jQuery外部文件~