显隐动画
show方法和hide方法：
$(selector).show(speed,callback)
- speed,显示的速度，可选值为毫秒、"slow"、"normal"、 "fast"
- callback，函数执行完后，要执行的函数
for(var i=0;i<5;i++){
$("body").append("<div><div>")
}
$("div").click(function(){
$(this).hide()
})
$("body").append("<button>show</button>")
$("button").click(function(){
$("div").show()
})
显隐切换
在jQuery1.9之后，删除了toggle函数，但是我们可以用一种间接的方法实现同样的效果
var state=1
$("#button1").click(function(){
state=!state
if(state){
$("p").show()
}
else{
$("p").hide()
}
})
滑动效果
slideDown和slideUp方法：
slideDown([speed],[callback]) 缓慢舒展
slideUp([speed],[callback])缓慢收缩
参数说明：
- speed，速度
- 执行完后要执行的函数
var slideState=1
$("#slide").click(function(){
slideState=!slideState
if(slideState){
$("img").slideUp(2000);
}
else{
$("img").slideDown(2000)
}
})
使用callback：
$("img").slideUp(2000,function(){
$(this).remove()
})
渐变效果
fadeIn和fadeOut方法：
fadeIn([speed],[callback])
fadeOut([speed],[callback])
//fadeIn
var fadeState=1
$("#fadeIn").click(function(){
fadeState=!fadeState
if (fadeState) {
$("img").fadeIn(2000)
}
else{
$("img").fadeOut(2000)
}
})
淡出的透明效果fadeTo：
fadeTo([speed],opacity,[callback])
$("img").fadeTo(1000,0.5)
渐变切换fadeToggle方法：
$("img").fadeToggle(2000)
复杂动画
animate方法：
animate(style,[speed],[eading],[callback])
$("#animate").click(function(){
$("img").animate({
width:"100px",
height:"200px",
},3000)
$("img").animate({
width:"300px",
height:"400px"
},3000,function(){
$("#animate").click()
})
})
用animate实现定位：
$("#position").click(function(){
$("img").animate({
left:300,
top:0
},2000)
$("img").animate({
left:300,
top:300
},2000)
$("img").animate({
left:0,
top:300
},2000)
$("img").animate({
left:0,
top:0
},2000,function(){
$("#position").click()
})
})
stop停止动画，off关闭动画
动画队列
$("img").queue("fa",function(){
$("img").animate({
left:300,
top:0
},2000)
$("img").animate({
left:300,
top:300
},2000)
$("img").animate({
left:0,
top:300
},2000)
$("img").animate({
left:0,
top:0
},2000,function(){
//$("#queue").click()
$("#updateQueue").click()
})
})
$("#queue").click(function(){
$("img").animate({
left:300,
top:300
},2000)
$("img").animate({
left:0,
top:0
},2000,function(){
$("#queue").click()
})
})
$("#updateQueue").click(function(){ //将默认的队列fx替换为自定义的fa
var fa=$("img").queue("fa")
$("img").queue("fx",fa)
})
使用dequeue()方法删除队列的最顶部的函数：
$("#dequeue").click(function(){
$("img").dequeue()
})
