纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

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

Cavewang   2021-09-14 我要评论
想了解JQuery实现隐藏和显示动画效果的相关内容吗,Cavewang在本文为您仔细讲解JQuery隐藏和显示动画效果的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:JQuery隐藏动画效果,JQuery显示动画效果,JQuery隐藏显示,下面大家一起来学习吧。

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

隐藏和显示

语法

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

参数说明:

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

实现代码

<!DOCTYPE html>
<html>

 <head>
  <meta charset="UTF-8">
  <title>文档处理</title>
  <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
  <style>
   div {
    background: lightblue;
    padding: 20px;
   }
   
   p {
    background: lavenderblush;
    padding: 20px;
   }
  </style>
  <script>
   $(function() {
    $("#btnHide").click(function() {
     //$("div").hide();
     //$("div").hide(2000);
     $("div").hide(2000, function() {
      alert("隐藏完成!");
     });
    });
    $("#btnShow").click(function() {
     //$("div").show();
     //$("div").show(2000);
     $("div").show(2000, function() {
      alert("显示完成!");
     });
    });
    $("#btnToggle").click(function() {
     //$("p").toggle();
     //$("p").toggle(2000);
     $("p").toggle(2000, function() {
      alert("切换完成!");
     });
    });
   });
  </script>
 </head>

 <body>
  <button id="btnHide">隐藏-div</button>
  <button id="btnShow">显示-div</button>
  <button id="btnToggle">切换显示和隐藏-p</button>
  <div>div1</div>
  <br/>
  <div>div2</div>
  <p style="display: none;">p1</p>
  <p>p2</p>
 </body>

</html>

效果展示

隐藏效果展示

显示效果展示

切换显示和隐藏

从P1切换成了P2

淡入和淡出

语法

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

参数说明:

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

实现代码

<!DOCTYPE html>
<html>

 <head>
  <meta charset="UTF-8">
  <title>效果</title>
  <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
  <style>
   div {
    background: lightblue;
    padding: 20px;
   }
   
   p {
    background: lavenderblush;
    padding: 20px;
   }
  </style>
  <script>
   $(function() {
    $("#btnIn").click(function() {
     //$("div").fadeIn();
     //$("div").fadeIn(2000);
     $("div").fadeIn(2000, function() {
      alert("淡入完成!");
     });
    });
    $("#btnOut").click(function() {
     //$("div").fadeOut();
     //$("div").fadeOut(2000);
     $("div").fadeOut(2000, function() {
      alert("淡出完成!");
     });
    });
    $("#btnToggle").click(function() {
     //$("p").fadeToggle();
     //$("p").fadeToggle(2000);
     $("p").fadeToggle(2000, function() {
      alert("切换完成!");
     });
    });
   });
  </script>
 </head>

 <body>
  <button id="btnIn">淡入-div</button>
  <button id="btnOut">淡出-div</button>
  <button id="btnToggle">切换淡入淡出-P</button>
  <div>div1</div>
  <br/>
  <div>div2</div>
  <p style="display: none;">p1</p>
  <p>p2</p>
 </body>

</html>

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


相关文章

猜您喜欢

  • .net使用rabbitmq .net平台的rabbitmq使用封装demo详解

    想了解.net平台的rabbitmq使用封装demo详解的相关内容吗,陈珙在本文为您仔细讲解.net使用rabbitmq的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:.net使用rabbitmq,.net,rabbitmq使用封装,下面大家一起来学习吧。..
  • Python调用百度AI识别表格 Python调用百度AI实现图片上表格识别功能

    想了解Python调用百度AI实现图片上表格识别功能的相关内容吗,鱼尾努力淦饭在本文为您仔细讲解Python调用百度AI识别表格的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:python百度ai文字识别,python图像识别与提取,python实现图片识别,下面大家一起来学习吧。..

网友评论

Copyright 2020 www.ben10gamesx.com 【Win11软件站】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式