web实训知识点_0409_jQuery动画操作
上节课的回顾：
$(document).ready(function(){})，这个是jQuery的入口标签
上文实际上等于
$(function(){})
注意：引入jQuery文件的里不能写东西
实际上$===jQuery
jQuery的基本语法:
$(select).action()，
jQuery的选择器：
当要选择“p标签的第一个和第三个”，可以
$("p eq(0)")
$("p eq(1)")
这个是jQuery特别的选择器
jQuery动画效果:隐藏和显示
使用hide()方法隐藏：
$('selected').hide(speed,cellback)
使用show()方法展示
$('selected').show(speed,cellback)
speed，规定了隐藏/显示的速度，取值为'slow','fast',毫秒（单位为毫秒）
cellback，规定了隐藏/显示完成之后，执行的方法（回调函数的一种）
例子，
$('p').hide(1000);
alert('恭喜隐藏成功');
和
$('p').show(1000,function(){alert("恭喜显示成功")});
的效果是不同的
toggle(),切换hide和show的状态（一个按钮实现hide和show的切换）
例子：
$('#btn3').click(function(){
$('p').toggle(1000);//切换当前的show,hide
})效果图：
jQuery动画效果:滑动效果
slideUp()
向上滑动
slideDown()
向上滑动
slideToggle()
切换滑动模式
属性和显示/隐藏一致，speed和cellback
toggle是切换的意思，在动画效果方法的后面加上
jQuery的动画效果：
animate方法用于创建自定义的动画
$(select).animate({params},speed,cellback)
必须的params参数必须写在大括号内
其他的参数和上面一致
例子:用animate方法实现
注意：在未给定位之前，html里的元素都默认有一个静态定位，且是不可移动的。如果想要移动，要将position设置为absolute，relative
再注意：animate方法几乎可以改变所有的的css属性，但前提是该属性用 驼峰命名法 命名：
例子：在css中：background-color ： black； 在animate中：backgroundColor：“black”，
animate使用相对值：
在需要提升的值上加“+=”，即可实现“继续增加”
animate使用队列功能：
如果你在之后编写多个animate()调用，jQuery会创建包含这些方法内部调用的队列
jQuery停止动画：stop()
stop()用于在动画完成前对它进行停止，只能暂停队列中的一个动画，如果队列中有很多个动画，它会结束当前的动画，然后运行下一个动画
jQuery——链（chaining）
通过jQuery，可以把方法连接在一起，chaining允许我们在一条语句中运行多个方法（在同一元素上）
$("p").css({color:"red"}).slideUp(1500).slideDown(1500).animate(backgroundColor:"blue");
这段方法的效果是：首先文字变红，接着向上滑动1.5秒，然后向下滑动1.5秒，最后背景变成蓝色
不使用链式的写法是：
$("p").css({color:"red"});
$("p").slideUp(1500);
$("p").slideDown(1500);
$("p").animate(backgroundColor:"blue");
链式的优点是：在使用相关元素的时候，可以不用反复查询同样的元素
实例：把两段动画链接在一起
$("#button1").click(function(){
var a = $("#div1");
a.animate({height:"300px",opacity:"0.5",lineHeight:"300px"},'slow').animate({width:"300px",opacity:"1"},'slow').animate({height:"100px",opacity:"0.5",lineHeight:"100px"},'slow').animate({width:"100px",opacity:"0.9",fontSize:"10px"},'fast');
})
作业：二级菜单
效果图：
二级菜单