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 自定义简单动画