现在的位置: 网页制作教程＞网站制作教程＞正文

toggle()、slideToggle()、fadeToggle()的使用方法实例介绍

发表于2018/7/25 ⁄ 网站制作教程 ⁄ 0条评论 ⁄ 热度 2,291℃

toggle()可用于显示和隐藏状态的切换。

slideToggle()可用于滑入和滑出状态的切换。

fadeToggle()可用于淡出和淡入状态间的切换。

下面是它们的使用方法实例：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <style type="text/css">
      div{
        border:1px solid #000;
        width:100px;
        height:100px;
      }
    </style>
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        $("#b1").click(function(){
          $("#b1Div").toggle("1000");
        });
        $("#b2").click(function(){
          $("#b2Div").slideToggle("slow");
        });
        $("#b3").click(function(){
          $("#b3Div").fadeToggle("slow");
        });
      });
    </script>
  </head>
  <body>
    <input type="button" id="b1" value="显示/隐藏 b1Div" />
    <div id="b1Div"></div> <br/>
    <input type="button" id="b2" value="滑出/滑入b2Div"/>
    <div id="b2Div"></div> <br/>
    <input type="button" id="b3" value="淡出/淡入b3Div" />
    <div id="b3Div"></div>
  </body>
</html>

声明:如需转载，请注明来源于www.webym.net并保留原文链接：http://www.webym.net/jiaocheng/1026.html