HTML学习笔记（9）-jQuery动画

jQuery动画包括显示和隐藏、渐入渐出、飞入飞出、自定义动画等。

一、显示和隐藏HTML元素

使用show（）方法可以动画效果显示指定的HTML元素，只适用于jQuery隐藏的元素或在CSS中声明style=‘display：none’的元素，其语法如下：

.show( [duration] [, easing ] [, comlete] )

duraion是动画效果的运行时间，easing是不同动画点中动画速度的easing函数，complete是动画效果执行完后调用的函数. 

例：使用show（）方法以动画形式显示HTML元素的实例

  


  显示图片
  
   

 点击按钮后 

例：使用hide（）方法隐藏指定的HTML元素的实例

  


  显示图片（需单击）
   
  消失图片（需双击）
  
   

注明：toggle()方法是切换HTML的显示效果

二、淡入淡出效果

淡入通过fadeIn()，淡出通过fadeOut(), 转换通过fadeToggle(), 参数同show（）方法。

例：实现淡入效果

  


  显示图片（需单击）
   
  消失图片（需双击）
  
   

例：使用fadeto方法调节HTML元素的透明度

  
单击我，我会变透明。
 
  
原先字体：用于比较
   

效果：

   单击第一段文字后   

三、滑动效果 

例：使用SlideDown() 方法以滑动效果显示HTML元素的实例

  
  


  
单击我!
  

  

  

   

注明：这里涉及id选择的知识，在jquery中，定义的时候用id=“div1”， 使用的时候用#div1。

以上代码也可以用slideToggle实现切换

效果：

  单击后     然后  

四、实现自定义的动画

$(selector).animate( properties [, duration] [,easing] [,complete] )

 properties:产生动画效果的CSS属性和值

例：通过animate()方法实现自定义动画的实例

变长
恢复

注明：jQuery使用document.ready来保证所要执行的代码是在DOM元素被加载完成的情况下执行。

五、动画队列

jQuery可以定义一组动画动作，并把它们放在队列（queue）中顺序执行。队列是一种先进先出原则的数据结构（线性表），它只允许在表的前端进行删除操作，在表的后端进行插入操作。

1. queue()方法

例：使用queue方法可以管理制定动画队列中要执行的函数

  
  
  



开始演示动画
队列长度为: 

注：fx是默认的jQuery队列，span是用来组合文档中的行内元素

效果：

   点击后   （一连串动作）

 

例：使用dequeue()方法执行下一个函数，同时将其出队

动画队列有函数数组list组成，每个动画函数后，调用div.dequeue("testList")方法从而执行动画队列中下一个动画函数（同时会将此动画函数出队）。