jQuery动画功能和封装原理
目录
1 显示/隐藏
2 淡入/淡出
3 向上/向下滑动
4 动画
5 多个动画设置
6 动画队列
7 下拉式菜单
8 Jquery 的封装原理
1 显示/隐藏
jQuery有一些易于实现的效果来创建动画。
hide()和show()方法用于隐藏和显示所选元素。
toggle()方法用于在隐藏和显示元素之间切换。
例如：
$(function() {
$("p").click(function() {
$("div").toggle();
});
});hide / show / toggle方法可以带一个速度参数,以毫秒为单位指定动画速度。
例如，我们为toggle方法传入一个1000毫秒的参数：
$(function() {
$("p").click(function() {
$("div").toggle(1000);
});
});hide / show / toggle 方法还有第二个可选参数可选，这是一个在动画完成后执行回调的方法。
2 淡入/淡出
与 hide / show 方法类似，jQuery提供了 fadeIn / fadeOut 方法，它将一个元素淡入和淡出显示。
和 toggle() 方法在隐藏和显示之间切换一样，fadeToggle()方法可以在淡入淡出中进行切换。
让我们看看fadeToggle()的实例：
$(function() {
$("p").click(function() {
$("div").fadeToggle(1000);
});
});和toggle()一样，fadeToggle()也具有两个可选参数：速度和回调函数。
用于淡入/淡出的另一种方法是fadeTo()，它将淡入/淡出到给定的不透明度（0和1之间的值）。 例如：$("div").fadeTo(1500,0.7);
3 向上/向下滑动
slideUp() 和 slideDown() 方法用于在元素上创建滑动效果。
再次，类似于以前的切换方法，slideToggle() 方法提供在滑动效果之间切换，一样也有两个可选参数：速度和回调函数。
例如：
$(function() {
$("p").click(function() {
$("div").slideToggle(500);
});
});4 动画
animate() 方法允许您将动画设置为设定值或相对于当前值的值。
你需要将CSS属性定义为JSON格式的参数（"key":"value"）。
第二个参数定义了动画的速度。
例如，以下代码将div的width属性在1秒内改变到250px：
$("div").click(function() {
$("div").animate({width: '250px'}, 1000);
});请注意提供CSS参数的JSON格式。 在处理CSS属性时，JSON语法也被用于以前的模块。
你可以使用上述语法对任何CSS属性进行动画处理，但有一个重要的事情要记住：当与animate() 方法一起使用时，所有属性名称都必须是camel-cased（camelCase是写复合词或短语的做法， 每个单词或缩写以大写字母开头，第一个单词以小写形式显示）。
您将需要编写paddingLeft而不是padding-left，marginRight，而不是margin-right等等。
5 多个动画设置
多个属性可以通过用逗号分隔来同时动画化。
例如：
$("div").animate({
width: '250px',
height: '250px'
}, 1000);也可以定义相对值（该值相对于元素的当前值）。 通过将 += 或 -= 放在值的前面完成：
$("div").animate({
width: '+=250px',
height: '+=250px'
}, 1000);要在动画完成之前停止动画，jQuery提供了stop()方法。
6 动画队列
默认情况下，jQuery带有动画的队列功能。
这意味着如果你写了多个animate()，则jQuery会为这些方法创建一个“内部”队列。然后逐个运行动画。
例如：
var div = $("div");
div.animate({opacity: 1});
div.animate({height: '+=100px', width: '+=100px', top: '+=100px'}, 500);
div.animate({height: '-=100px', width: '-=100px', left: '+=100px'}, 500);
div.animate({height: '+=100px', width: '+=100px', top: '-=100px'}, 500);
div.animate({height: '-=100px', width: '-=100px', left: '-=100px'}, 500);
div.animate({opacity: 0.5});以上的animate() 方法将一个接一个地运行。
7 下拉式菜单
让我们创建一个简单的下拉菜单，点击菜单项将打开。
HTML：
JS:
$("#item").click(function() {
$("#submenu").slideToggle(500);
}); 上面的代码处理 id="item" 元素的点击事件，并在500毫秒内打开/关闭子菜单。
8 Jquery 的封装原理
jQuery中的封装原理
匿名函数的自调用
闭包原理
闭包的优点：
1、可以减少全局变量的对象，防止全局变量过去庞大，导致难以维护
2、防止可修改变量，因为内部的变量外部是无法访问的，并且也不可修改的。安全
3、读取函数内部的变量，另一个就是让这些变量的值始 终保持在内存中。