jquery中的toggle与slideToggle的区别

最新推荐文章于 2023-06-07 16:03:59 发布

耿宇丹

最新推荐文章于 2023-06-07 16:03:59 发布

阅读量5.3k

点赞数 1

分类专栏： Jquery内容

本文链接：https://blog.csdn.net/gengyudan/article/details/8901784

版权

Jquery内容专栏收录该内容

21 篇文章 0 订阅

订阅专栏

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="width:100px; height:100px; background-color:red;" id="z"></div>
<div style="width: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
        {
            width: 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>

耿宇丹

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
jquery中的toggle与slideToggle的区别

jQuery中的 toggle和slideToggle 方法，都可以实现对一个元素的显示和隐藏。强大啊~ 区别是： toggle：动态效果为从右至左。横向动作。 slideToggle：动态效果从下至上。竖向动作。 so，比如想实现一个树由下至上收缩的动态效果，就使用slideToggle就ok了。此外，toggle和slideToggle 还有一些参数可以设置，具体看j
复制链接

扫一扫