JQuery实现隐藏和显示动画效果

本文为大家分享了JQuery实现隐藏和显示动画效果的具体代码，供大家参考，具体内容如下

隐藏和显示

语法

• $(selector).fadeIn([speed,callback]);
• $(selector).fadeOut([speed,callback]);
• $(selector).fadeToggle([speed,callback]);
  

参数说明：

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

实现代码

 
  
  
  
  
  
 

 
  隐藏-div
  显示-div
  切换显示和隐藏-p
  
div1
  

  
div2
  
p1
  
p2
 

效果展示

隐藏效果展示

显示效果展示

切换显示和隐藏

从P1切换成了P2

淡入和淡出

语法

• $(selector).fadeIn([speed,callback]);
• $(selector).fadeOut([speed,callback]);
• $(selector).fadeToggle([speed,callback]);
  

参数说明：

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

实现代码

 
  
  
  
  
  
 

 
  淡入-div
  淡出-div
  切换淡入淡出-P
  
div1
  

  
div2
  
p1
  
p2
 

效果与隐藏和显示相差不大

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。