锐客网

  1. 首页 > it技术 > >

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

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

  • $(selector).fadeIn([speed,callback]);
  • $(selector).fadeOut([speed,callback]);
  • $(selector).fadeToggle([speed,callback]);
参数说明：
可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

实现代码
文档处理 - 锐客网div {background: lightblue; padding: 20px; }p {background: lavenderblush; padding: 20px; } div1
div2p1
p2

效果展示
隐藏效果展示
JQuery实现隐藏和显示动画效果
文章图片

显示效果展示
JQuery实现隐藏和显示动画效果
文章图片

切换显示和隐藏
从P1切换成了P2
JQuery实现隐藏和显示动画效果
文章图片

淡入和淡出 语法
  • $(selector).fadeIn([speed,callback]);
  • $(selector).fadeOut([speed,callback]);
  • $(selector).fadeToggle([speed,callback]);
参数说明：
可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

实现代码
效果 - 锐客网div {background: lightblue; padding: 20px; }p {background: lavenderblush; padding: 20px; } div1
div2p1
p2

效果与隐藏和显示相差不大
【JQuery实现隐藏和显示动画效果】以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

    推荐阅读


    上一篇：Python编程使用DRF实现一次性验证码OTP

    下一篇：C++|C++ 标准模板类详解