jQuery学习笔记(三)jQuery中的动画

1 show() 方法和hide() 方法  （显示和隐藏）

　　　show() 方法和hide() 方法是jQuery中基本的动画方法。在HTML文档里，为一个元素调用hide() 方法，会将该元素的display样式改成“none”。

$("element").hide();    //经过hide()方法将element元素隐藏
$("element").css("display","none");    //经过css()方法将element元素隐藏
$("element").show();    //经过show()方法将element元素显示
$(“element”).show(3000);　　　　//经过show()方法将element元素在3秒种内显示完成

  　　show() 方法和hide() 方法在不带任何参数状况下，至关于css("display","none,block,inline"),做用是离开显示或隐藏匹配的元素，不会有任何的动画效果。

　　　若是但愿在调用show()方法时，元素慢慢地显示出来，能够为show()方法指定一个速度参数。

　　　例如：$(“element”).show(3000); 在3000毫秒内显示，即3秒种内显示完成。这种方法在显示或者隐藏的时候，内容与透明图都是渐进的显示或隐藏的，因此有一种动画的感受。

2 fadeln() 方法和fadeOut() 方法   （淡入和淡出）

　　　fadeIn()、fadeOut()与show()、hide()的差异就在与它们只改变其透明度，简单而言，其效果就是要实现淡入、淡出的动画效果。

3 slideUp() 方法和slideDown() 方法　（滑动）

　　　slideUp()和slideDown()方法与show()、hide()方法的差异就在于其改变的是元素的高度，使元素上下滑动。

4 其余动画方法

　　　除了上面提到的动画方法，jquery中还有4个专门用于交互的动画方法。

　　　1.toggle()方法

　　　　toggle()方法能够切换元素的可见状态。若是元素是可见，则切换为隐藏的；若是元素是可见，则切换为隐藏的；

5 自定义动画方法animate()

　　　不少状况下，这些方法没法知足用户的各类需求，那么就须要对动画有更多的控制，须要采起一些高级的自定义动画来解决这些问题。在jquery中，可使用animate()方法开自定义动画。

　　　其语法结构为：animate(params,speed,callback);

　　　参数说明以下：

　　　（1）params: 一个包含样式属性及值得映射，好比{property:"value1",property:"value2"...}。

　　　（2）speed: 速度参数，可选。

　　　（3）callback: 在动画完成是执行的函数，可选。

　　　4.1 自定义简单动画