学步园

    这一节我们来学习一下jQuery实现一些动画的函数，我初步试验了一下，效果非常不错。以前纯粹自己实现的渐显，渐隐等
要写很多代码的，现在基本一行搞定，大家可以试试哦。

 

函数：animate(params, speed, easing, callback)
功能：这是个用来设定自定义动画的函数，这个函数的关键之处在于这个对象
      的那些样式属性将设为动画和什么时候终止
返回：jQuery对象
参数：
params (Hash): 要设定改变的一系列属性
speed (String|Number): 可选的，可以为 ("slow", "normal", or "fast")或以微秒为单位的数字. 
easing (String): 可选的，easing对象需要插件
callback (Function): 可选的，动画执行完成后执行的动作
例子：
jQuery Code
$("p").animate({
  left: 50, opacity: 'show'
}, 500);

 

 

函数：fadeIn(speed,callback),fadeOut(speed,callback),fadeTo(speed,opacity,callback)
功能：匹配元素的渐显效果，渐隐效果，渐变效果
返回：jQuery对象
参数：
speed (String|Number): 可选的，可以为 ("slow", "normal", or "fast")或以微秒为单位的数字. 
callback (Function): 可选的，动画执行完成后执行的动作
opacity：透明度
例子：
jQuery Code
$("p").fadeOut("slow");

jQuery Code
$("p").fadeOut("slow",function(){
  alert("Animation Done.");
});

$("p").fadeTo("slow", 0.5);
jQuery Code
$("p").fadeTo("slow", 0.5, function(){
  alert("Animation Done.");
});

 

 

函数：hide(speed,callback),hide()
功能：以一定的速度隐藏，或立即隐藏
返回：jQuery对象
例子：
jQuery Code
$("p").hide("slow");

jQuery Code
$("p").hide("slow",function(){
  alert("Animation Done.");
});

 

 

函数：show(),show(speed,callback)
功能：以一定的速度显示，或立即显示
返回：jQuery对象
例子：
jQuery Code
$("p").show("slow");

jQuery Code
$("p").show("slow",function(){
  alert("Animation Done.");
});

 

 

函数：slideDown(speed,callback),slideUp(speed,callback),slideToggle(speed,callback)
功能：以一定速度向下展开，向上收缩，如果隐藏则向下展开，如果显示则向上收缩
返回：jQuery对象
参数：
speed (String|Number): 可选的，可以为 ("slow", "normal", or "fast")或以微秒为单位的数字. 
callback (Function): 可选的，动画执行完成后执行的动作
例子：
jQuery Code
$("p").slideDown("slow");
jQuery Code
$("p").slideDown("slow",function(){
  alert("Animation Done.");
});

 

 

函数:toggle()
功能：切换匹配元素的可见性，如果本来是不可见，则显示，否则不显示
返回：jQuery对象
例子：无