jquery显示/隐藏

2021-09-02 14:00:30 阅读：173 来源： 互联网

标签：jquery 显示 slow hide div2 div3 隐藏 div1 1000

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
      if( $("#div1").css('display') === "none") {
            $("#div1").fadeIn();
            $("#div2").fadeIn("slow");
            $("#div3").fadeIn(1000);
      } else {
              $("#div1").hide();
            $("#div2").hide("slow");
            $("#div3").hide(1000);
      }
  });
$("#btn2").click(function(){
        $("#div1").toggle();
        $("#div2").toggle("slow");
        $("#div3").toggle(1000);
  });
$("#btn3").click(function(){
        if( $("#div1").css('display') === "none") {
            $("#div1").show();
            $("#div2").show("slow");
            $("#div3").show(1000);
      } else {
              $("#div1").hide();
            $("#div2").hide("slow");
            $("#div3").hide(1000);
      }
  });
});
</script>
</head>

<body>
<p>以下实例演示了 fadeIn() 使用了不同参数的效果。</p>
<button id = "btn1">点击淡入淡出 div 元素。</button>
<button id = "btn2">显示/隐藏</button>
<button id = "btn3">显示/隐藏</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>

</body>
</html>

标签：jquery,显示,slow,hide,div2,div3,隐藏,div1,1000
来源： https://www.cnblogs.com/zhuyuantan/p/15218388.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

jquery显示/隐藏