zoukankan      html  css  js  c++  java
  • jquery中的toggle与slideToggle的区别

     jQuery中的

    toggle和slideToggle 方法,都可以实现对一个元素的显示和隐藏。强大啊~

    区别是:

    toggle:动态效果为从右至左。横向动作。

    slideToggle:动态效果从下至上。竖向动作。

    so,比如想实现一个树由下至上收缩的动态效果,就使用slideToggle就ok了。

    此外,toggle和slideToggle 还有一些参数可以设置,具体看jQuery的API就可以了~

    toggle的用法:

    <SCRIPT src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></SCRIPT>
    <SCRIPT LANGUAGE="JavaScript">
    $(function(){
     $("#z").toggle(
        function(){
         alert(1);
        },
        function(){
         alert(2);
        },
        function(){
         alert(3);
        }
     );
     $("#x").click(function(){
      $("#z").toggle(
        function(){
         alert(1);
        },
        function(){
         alert(2);
        },
        function(){
         alert(3);
        }
      );
     });
    })
    </SCRIPT>
    <div style="100px; height:100px; background-color:red;" id="z"></div>
    <div style="100px; height:100px; background-color:blue;" id="x"></div>

    slideToggle的用法:

     <title></title>
        <script src="jquery-1.9.1.js" type="text/javascript"></script>
        <style type="text/css">
            .imgclass
            {
                300px;
                height: 300px;
                border: solid 1px red;
            }
        </style>
        <script type="text/javascript">
            $(function () {
                $('#Button1').bind('click', function () {
                    $('img').slideUp(2000);
                });
                $('#Button2').bind('click', function () {
                    $('img').slideDown(2000);
                });
                $('#Button3').bind('click', function () {
                    $('img').slideToggle(2000);
                })
            })
        </script>
    </head>
    <body>
        <div>
            <div>
                <input id="Button1" type="button" value="上拉" /><input id="Button2" type="button"
                    value="下拉" /><input id="Button3" type="button" value="自动上拉下拉" /></div>
            <div>
                <img alt="" src="images/1.jpg" class="imgclass" /></div>
        </div>
    </body>

  • 相关阅读:
    实现货币金额中文大写转换的程序
    大数阶乘的计算(三)
    全国15亿人口中选1000个代表有多少种选法?
    DB Query Analyzer 中断SQL语句的执行
    Android_Preference存取数据
    Centos 学习笔记软件包管理
    Centos学习笔记文件搜索命令
    《计算机时代》2011年第12期刊登出《DB Query Analyzer中断SQL语句的执行》
    Centos学习笔记linux用户管理
    Centos学习笔记 linux 常用命令:压缩解压命令
  • 原文地址:https://www.cnblogs.com/javawebsoa/p/3067415.html
Copyright © 2011-2022 走看看