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

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

隐藏和显示

语法

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

参数说明:

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

实现代码




 
  
  文档处理
  
  
  
 

 
  
  
  
  
div1

div2

p1

p2

效果展示

隐藏效果展示

JQuery实现隐藏和显示动画效果_第1张图片

显示效果展示

JQuery实现隐藏和显示动画效果_第2张图片

切换显示和隐藏

从P1切换成了P2

JQuery实现隐藏和显示动画效果_第3张图片

淡入和淡出

语法

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

参数说明:

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

实现代码




 
  
  效果
  
  
  
 

 
  
  
  
  
div1

div2

p1

p2

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

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

你可能感兴趣的