浅析jquery中的toggle与slideToggle的区别

 jquery中的

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

区别是：

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

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

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

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

 

toggle的用法：

<script></script><script 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><p width :100px height background-color :red></p>
<p></p>

 

slideToggle的用法：

 <title></title>
    <script></script>
    <style>
        .imgclass
        {
            width: 300px;
            height: 300px;
            border: solid 1px red;
        }
    </style>
    <script>
        $(function () {
            $(&#39;#Button1&#39;).bind(&#39;click&#39;, function () {
                $(&#39;img&#39;).slideUp(2000);
            });
            $(&#39;#Button2&#39;).bind(&#39;click&#39;, function () {
                $(&#39;img&#39;).slideDown(2000);
            });
            $(&#39;#Button3&#39;).bind(&#39;click&#39;, function () {
                $(&#39;img&#39;).slideToggle(2000);
            })
        })
    </script>
    <p>
        </p><p>
            <input><input><input></p>
        <p>
            @@##@@</p>