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

这篇文章主要为大家展示了"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
 

以上是"JQuery怎样实现隐藏和显示动画效果"这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注行业资讯频道！