jQuery 效果- 隐藏和显示

简介: jQuery 效果- 隐藏和显示

隐藏和显示如图所示:

20210902093113939.gif

jQuery hide() 和 show()

可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素,它的语法为

$(selector).hide(speed,callback);
$(selector).show(speed,callback);

speed :显示元素出现的速度,通常以毫秒表示,也可以使用fast和slow 。

callback :(可选) 参数是隐藏或显示完成后所执行的函数名称。

下面写出了hide(speed)方法和show(speed)方法:

<style>
        p{
            width: 300px;
            background-color: yellow;
            text-align: center;
        }
</style>
//  body部分
<body>
    <button id="hide">点击我p1将会被隐藏</button>
    <button id="show">点击我p1将会显示出来</button>
    <p>p1</p>
    <script src="../jquery-3.6.0.js"></script>
    <script>
        $('#hide').click(function(){
            $('p').hide(1000);
        });
        $('#show').click(function(){
            $('p').show(1000);
        })
    </script>
</body>

下面例子写出了带有 speed 参数的 hide() 方法,并使用回调函数:

// style 样式
<style>
    div {
            display: inline-block;
            width: 130px;
            height: 50px;
            padding: 15px;
            margin: 15px;
            background-color: green;
        }
</style>
// body部分
<body>
    <div>隐藏以及设置回调函数</div>
    <br>
    <button class="hidebtn">点击此处隐藏</button>
    <script src="../jquery-3.6.0.js"></script> 
    <script>
        $(document).ready(function () {
            $('.hidebtn').click(function () {
// jQuery自身提供"linear" 和 "swing",其他可以使用相关的插件
                $('div').hide(1000, 'linear', function () {  //第二个参数是一个字符串,表示过渡使用哪种缓动函数。
                    alert('方法已经调用完毕');            //当此函数执行完毕后回调alert内容
                });
            })
        })
    </script>
</body>

效果如下图所示:

20210902095857575.gif

jQuery toggle()

语法:$(selector).toggle(speed,callback);

也可以使用 toggle() 方法来切换 hide() 和 show() 方法。

toggle():显示被隐藏的元素,并隐藏已显示的元素

<button>点击显示或隐藏</button>
    <br>
    <p>这是一段非常多的一段非常多的一段非常多的一段文字</p>
    <script src="../jquery-3.6.0.js"></script>
    <script>
        $(document).ready(function(){
            $('button').click(function(){
            $('p').toggle(1000,'linear',function(){
                // alert('函数已经回调完毕!');
            });
        })
        })
    </script>

效果如下图:

20210902100615453.gif





目录
打赏
0
0
0
0
5
分享
相关文章
|
5月前
|
jQuery 隐藏/显示
jQuery 隐藏/显示
55 9
|
7月前
|
jQuery 效果- 隐藏和显示
jQuery 效果- 隐藏和显示
33 0
|
9月前
|
jquery的隐藏和显示
jquery的隐藏和显示
44 1
【jQuery动画】显示与隐藏效果
在网页开发中,适当地使用动画可以使页面更加美观,进而增强用户体验。jQuery中内置了一系列方法用于实现动画,当这些方法不能满足实际要求时,用户也可以自定义动画。本期我们一起来了解一下显示与隐藏效果吧~
jQuery——动画,显示与隐藏,获取,添加
必需的 params 参数定义形成动画的 CSS 属性 可选的 speed 参数规定效果的时长,可以取以下值:“slow”、“fast” 或毫秒。 可选callback 参数是动画完成后所执行的函数名称
137 0

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等