toggle(),显示和隐藏元素

功能:用来显示和隐藏某个元素,例如第一次点击按钮显示元素,再次点击按钮会隐藏元素
书写格式:$(selector).toggle(speed,callback,switch)


****toggle包含三个参数speed,callback,switch.****
speed
可选。规定元素从可见到隐藏的速度(或者相反)。默认为 "0"。
可能的值:
•毫秒 (比如 1500)
•"slow"
•"normal"
•"fast"
在设置速度的情况下,元素从可见到隐藏的过程中,会逐渐地改变其高度、宽度、外边距、内边距和透明度。
如果设置此参数,则无法使用 switch 参数。


callback
这个参数是用来是否当动画执行完毕后执行其他函数,例如当动画从隐藏到显示已经执行完毕,我们想让他弹出一句话,此时就可以将弹出一句话的函数下在这里


switch
可选。布尔值。规定 toggle 是否隐藏或显示所有被选元素。
•True - 显示所有元素
•False - 隐藏所有元素
如果设置此参数,则无法使用 speed 和 callback 参数。


****效果****

Paste_Image.png
Paste_Image.png

****代码****

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #content{width:200px;height: 200px;background-color: #cccccc;display: none;}
        </style>
</head>
<body>
<button id="hide">显示/隐藏</button>
<div id="content">
    你好!
</div>
</body>
<script src="js/jquery-3.1.1.min.js"></script>
<script>
    $(document).ready(function(){
        $("#hide").click(function(){
            $("#content").toggle(1000,h);
        })
    })
   var h= function hello(){
        alert("hello")
    }
</script>
</html>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容