四.淡入淡出动画函数
淡出淡出函数只提供透明度渐变的效果.
淡入淡出函数 Fading

    
    
    
    

     
     
     
     
      
      
      
      

       
       
       
       名称
       
       
       
       说明
       
       
       
       举例
      
      
      
      

      
      
      
      

       
       
       
       fadeIn( speed, [callback] )
       
       
       
       
通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

       
       
       
       用600毫秒缓慢的将段落淡入: 
$("p").fadeIn("slow");		
      
      
      
      

      
      
      
      

       
       
       
       fadeOut( speed, [callback] )
       
       
       
       通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。
       
       
       
       用600毫秒缓慢的将段落淡出: 
$("p").fadeOut("slow");		
      
      
      
      

      
      
      
      

       
       
       
       fadeTo(speed, opacity, [callback])
       
       
       
       把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。
       
       
       
       用600毫秒缓慢的将段落的透明度调整到0.66，大约2/3的可见度: 
$("p").fadeTo("slow", 0.66);$("p").fadeTo("slow", 0.66);		
      
      
      
      

     
     
     
     
    
    
    
    
 
讲解
fadeIn和fadeOut两个函数对应show和hide, 用于将对象以透明度渐变的效果显示和隐藏:
$("#divPop").fadeIn(200);$("#divPop").fadeOut("fast");


 


透明度渐变没有切换函数.


需要特别讲解的是fadeTo函数. 这个函数能让对象渐变到指定的透明度上. opacity参数取值从0-1, 比如0.6表示透明度为60%.


和fadeIn与fadeOut不同的是, fadeTo函数只改变对象的透明度, 即使透明度为0对象仍然占位.  而fadeIn和fadeOut最后一定会改变对象的display属性, fadeOut后对象将从页面上消失(不占位), 但是fadeTo仅仅是让其透明(占位).


fadeTo函数可以配合fadeIn使用. 比如默认的情况下, fadeIn最后让对象完全显示:






   
   
   
   
    
    
    
    
    
  1.  //设置弹出层的透明度                
    2. 
    
    
    
    
  2.  $("#divPop").fadeTo(0, 0.66);                 
    3. 
    
    
    
    
  3. //让弹出层透明显示                 
    4. 
    
    
    
    
  4. if ($("#divPop").css("display") == "none")    
    5. 
    
    
    
    
  5.     {                   
    6. 
    
    
    
    
  6.         $("#divPop").fadeIn(speed);               
    7. 
    
    
    
    
  7.     }                
    8. 
    
    
    
    
  8.    else  {  
    9. 
    
    
    
    
  9.         $("#divPop").fadeOut(speed);       
    10. 
    
    
    
    
  10.    } 
    11.

 

 

 

用fadeTo设置了弹出层透明度后, 在使用fadeIn会让对象显示并且渐变到fadeTo设置的透明度.

这里介绍的仅仅是两个函数的特性, 实际应用中并不一定要两者配合使用.

 

五.自定义动画函数

上面三个渐变动画函数已经基本满足了我们日常需求.  但是如果我们一定要创建自己的特殊的效果, jQuery也为我们提供了相关函数.

自定义动画函数 Custom

名称 说明 举例
animate( params, [duration], [easing], [callback]  )

用于创建自定义动画的函数。

这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）。注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left.

而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值，样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值，则会为该属性调用默认的动画形式。

在 jQuery 1.2 中，你可以使用 em 和 % 单位。另外，在 jQuery 1.2 中，你可以通过在属性值前面指定 "+=" 或 "-=" 来让元素做相对运动。

jQuery 1.3中，如果duration设为0则直接完成动画。而在以前版本中则会执行默认动画。

 点击按钮后div元素的几个不同属性一同变化: 
// 在一个动画中同时应用三种类型的效果
$("#go").click(function(){ 
$("#block").animate({ 
  width: "90%", 
  height: "100%", 
  fontSize: "10em", 
  borderWidth: 10 
}, 1000 ); 
});
animate( params, options )

用于创建自定义动画的函数。

这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）。注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left.

而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值，样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值，则会为该属性调用默认的动画形式。

在 jQuery 1.2 中，你可以使用 em 和 % 单位。另外，在 jQuery 1.2 中，你可以通过在属性值前面指定 "+=" 或 "-=" 来让元素做相对运动。

 第一个按钮按了之后展示了不在队列中的动画。在div扩展到90%的同时也在增加字体，一旦字体改变完毕后，边框的动画才开始: 

$("#go1").click(function(){ $("#block1").animate( { width: "90%"}, { queue: false, duration: 5000 } ) .animate( { fontSize: '10em' } , 1000 ) .animate( { borderWidth: 5 }, 1000); }); $("#go2").click(function(){ $("#block2").animate( { width: "90%"}, 1000 ) .animate( { fontSize: '10em' } , 1000 ) .animate( { borderWidth: 5 }, 1000); });
stop( [clearQueue], [gotoEnd] )

停止所有在指定元素上正在运行的动画。

如果队列中有等待执行的动画(并且clearQueue没有设为true)，他们将被马上执行


clearQueue(Boolean):如果设置成true，则清空队列。可以立即结束动画。

gotoEnd (Boolean):让当前正在执行的动画立即完成，并且重设show和hide的原始样式，调用回调函数等。

 

 点击Go之后开始动画,点Stop之后会在当前位置停下来: 

// 开始动画$("#go").click(function(){  $(".block").animate({left: '+200px'}, 5000);});// 当点击按钮后停止动画$("#stop").click(function(){  $(".block").stop();});

参数说明

1.params(可选)

类型:Options

说明:一组包含作为动画属性和终值的样式属性和及其值的集合. 

讲解:通过把元素的样式属性值, 从当前值逐渐调整到params设置的值而产生动画效果.

2.duration(可选)

类型:String,Number

说明:三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)

讲解:动画效果持续的时间, 时间越长则变得越慢. 如果省略则不会产生动画.

3.easing(可选)

类型:String

说明:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".

讲解:为了让元素逐渐达到params设置的最终效果,  我们需要有一个函数来实现渐变, 这类函数就叫做easing函数. 但是需要这里传递的只是easing函数名称, 使用前需要先将easing函数注册到jQuery上.

4.options参数

类型:Options

说明:一组包含动画选项的值的集合。

讲解:所支持的属性如下:

  • duration:  与上面的duration参数相同
  • easing: 与上面的easing参数相同
  • complete :类型为Function, 在动画完成时执行的函数
  • step: Callback
  • queue (Boolean): (默认值: true) 设定为false将使此动画不进入动画队列 (jQuery 1.2中新增)

 

 

六.全局控制属性

最后讲一下和动画相关的属性:

名称: jQuery.fx.off

返回值: Boolean

说明:

关闭页面上所有的动画。

讲解:

把这个属性设置为true可以立即关闭所有动画(所有效果会立即执行完毕)。有些情况下可能需要这样，比如：

* 你在配置比较低的电脑上使用jQuery。

* 你的一些用户由于动画效果而遇到了 可访问性问题

当把这个属性设成false之后，可以重新开启所有动画。

比如下面的代码会执行一个禁用的动画:

jQuery.fx.off = true;$("#divPop").show(1000);


虽然使用了动画效果的show函数, 但是因为关闭了所有动画, 所以div会立刻显示出来而没有渐变效果.