学习要点
- 显示隐藏
- 滑动卷动
- 淡入淡出
- 自定义动画
- 队列动画方法
- 动画相关方法
- 动画全局属性
显示隐藏
jquery中显示方法为show() 隐藏方法为hide(),在无参数的时候，只是硬性的显示内容和隐藏内容。
$(".class").click(function(){
$("#box").show(); //显示
})
$(".class").click(function(){
$("#box").hide(); //隐藏
})
注意hide()方法其实就是在行内设置css代码。display:none;而show()方法要根据元素是区块还是内联来决定。要是区块就是display:block;要是内联就是display:inline.
在show()和hide()方法里可以传递参数，这个参数以毫秒来控制速度,并且含有匀速变大变小，以及透明度变化
$(".class").click(function(){
$("#box").show(1000); //显示用了1秒
})
$(".class").click(function(){
$("#box").hide(1000); //隐藏用了1秒
})
除了直接使用毫秒来控制速度，jQuery还提供了三种预设速度 slow ,normal 和fast分别对应600毫秒，400毫秒，200毫秒
$("#div1").click(function(){
$("#box").show('fast'); //200毫秒
})
$("#div1").click(function(){
$("#box").hide('slow'); //600毫秒
})
特别注意的就是不管传递毫秒数还是传递预设字符串，如果不小心传递错误或者传递空字符串。那么他将采取默认值400毫秒.
$("#div1").click(function(){
$("#box").show();
})
使用show()和hide()回调函数，可以实现队列动画
$(".div1").click(function(){
$("#box").show('slow',function(){
alert("动画执行完毕");
})
//队列动画，使用函数名调用自身
$(".show").click(function(){
$("div").first().show('fast',function showspan(){
$(this),next().show('fast',showspan);
})
})
//队列动画，使用arguments.callee匿名函数自己调用
$(".show").click('slow',function(){
$("#div1").show('fast',arguments.callee)
})
我们在使用hide()和show()的时候如果需要一个按钮切换操作。需要进行一些条件判断，而jquery给我们提供了一个类似功能的独立方法。toogle()
$(".div").click(function(){
$(this).toggle('slow');
})
(二) 滑动 卷动
jquery提供了一组改变元素高度的方法.slideUp()和slideDown()和slideToggle() 顾名思义向上卷动，向下展开
$(".down").click(function(){
$("#div1").slideDown();
}) //向下展开
$(".down").click(function(){
$("#div1").slideUp(); //向上收缩
})
$(".down").click(function(){
$("#div1").slideToggle()
})
注意: 滑动，卷动和显示隐藏一样。具有相同的参数
淡入 淡出
jquery提供了一组专门用于透明度变化的方法fadeIn()和fadeOut()和fadeToggle()
$("#div1").click(function(){
$("#box").fadeOut('slow'); //淡出
})
$("#div2").click(function(){
$("#box").fadeIn('slow'); //淡入
})
$("#div2").click(function(){
$("#box").fadeToggle(); //淡入
})
上面这3个透明度只能是从0到100，或者100到0 如果我们想设置指定值就只有fadeTo方法
$("#toggle").click(function(){
$("#box").fadeTo('slow',0.33); //0.33表示33
})
注意淡入淡出和显示，隐藏一样。具有相同的参数，对于fadeTo方法，如果本身大于指定值，会淡出
自定义动画
当上述几种满足不了我们的需求时候，我们要用的就是自定义动画animate()动画
$("#box").animate({
"width":"400px",
"height":"500px",
"fontSize":" 30px",
"opacity": 0.4
})
一个css变化就是一个动画效果，上面已经有4个CSS变化，已经实现了多重动画同步效果
必传的参数只有一个，键值对的参数，还有两个可选的参数分别是速度和回调函数
$("#box").click(function(){
$("#yundong").animate({
"width":"400px",
"height":"300px",
"opacity":0.4
},1000,function(){
window.alert("动画执行完毕")
})
})
到目前为止，我们都是创建固定位置不动的动画，如果要实现运动状态的位移动画，那就要结合css的绝对定位功能
$("#box").click(function(){
$("#move").animate({ //必须先设置css绝对定位
"left":"+=300px", //每一次都会300
"top":"200px"
},1000)
})
实现列队的动画方式有两种，第一种在回调函数中在执行一个动画，第二种通过连缀或顺序来实现动画。
$("#box").click(function(){
$("#box1").animate({"left","100px"});
$("#box1").animate({"top","100px"});
$("#box1").animate({"width","100px"});
$("#box1").animate({"height","100px"});
})
这里特别注意的就是如果不是同一个元素就会实现同步动画。
通过回调实现队列动画
$("#box").click(function(){
$("#box").animate({
"left":"300px"
},1000,function(){
$("#box").animate({"width":"300px"},1000)
})
})
通过连缀实现队列动画
$("#box").click(function(){
$("$box2").animate({"width":"300px"}).animate({"height":"200px"}).animate({"left":"200px"});
})
列队动画方法
当连缀无法实现按顺序列队。那我们必须要用css方法了。但是css()方法会在一开始就传入列队之前。那么可以采用动画方法的回调函数来解决。
所以jQuery提供了一个类似回调函数的方法queue()
$("#box").slideUp('slow').slideDown('slow').queue(function(){
$(this).css("background","#ccc");
})
当我想在queue后面再添加一个动画效果的时候，做不到。这个时候就必须在结尾处调用next()方法
$("#box").slideUp('slow').slideDown('slow').queue(function(next){
$(this).css("background","#ccc");
next();
}).hide('slow');
如果使用顺序调用，那么使用列队动画就非常清晰了。每一段代表一个列队。
$("#box").slideUp(); //卷起来
$("#box").slideDown(); //卷下来
$("#box").queue(function(){
$(this).css('background','orange');
next();
})
$("#box").hide('slow');
动画相关的方法
很多时候需要停止正在运行的动画，所以jquery提供了一个stop()方法，代表是否清空未执行完的动画队列。
$("#box2").click(function(){
$("#box").stop(); //停止动画
})；
$("#box2").click(function(){
$("#box2").stop(false,true);
})
第一个参数表示是否取消列队动画，默认是false。如果参数为true,当有列队动画的时候，会取消后面的列队动画。第二个参数表示是否到达当前动画的结尾，默认是false，如果参数为true则停止后立即到达结尾
延迟
有的时候动画需要延迟执行于是jquery提供了delay()方法.
$("#div1").delay(1000).animate({
"left":"300px"
})
备注关于队列动画
有的时候来回切换浏览器的时候，会产生大量的队列动画。
这样来回切换的时候会突然间爆发出来。
所以在使用队列动画的时候，前面必须要加stop
$("#box2").stop().animate({
"width":"1000px",
"height":"400px",
"left":"+=200px"
},1000)
