jquery（二）效果显示隐藏等

最新推荐文章于 2022-10-03 14:24:45 发布

踟蹰千年

最新推荐文章于 2022-10-03 14:24:45 发布

阅读量108

点赞数

分类专栏： # 前端-javascript

本文链接：https://blog.csdn.net/baiyan3212/article/details/83109101

版权

前端-javascript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

http://www.w3school.com.cn/jquery/jquery_ref_effects.asp

jQuery 效果函数

方法	描述
animate()	对被选元素应用“自定义”的动画
clearQueue()	对被选元素移除所有排队的函数（仍未运行的）
delay()	对被选元素的所有排队函数（仍未运行）设置延迟
dequeue()	运行被选元素的下一个排队函数
fadeIn()	逐渐改变被选元素的不透明度，从隐藏到可见
fadeOut()	逐渐改变被选元素的不透明度，从可见到隐藏
fadeTo()	把被选元素逐渐改变至给定的不透明度
hide()	隐藏被选的元素
queue()	显示被选元素的排队函数
show()	显示被选的元素
slideDown()	通过调整高度来滑动显示被选元素
slideToggle()	对被选元素进行滑动隐藏和滑动显示的切换
slideUp()	通过调整高度来滑动隐藏被选元素
stop()	停止在被选元素上运行动画
toggle()	对被选元素进行隐藏和显示的切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery/jquery.js"></script>
    <script>
        $(function(){
            //hide(),show()
            //点击显示隐藏
            $("#b1").toggle(function(){
                $("#p1").hide();
            },function () {
                $("#p1").show(2000);    //给定时间 控制显示或隐藏速度
            })

            //jQuery Fading 方法 淡入淡出效果
            $("#b2").toggle(function(){
                $("#p2").fadeOut(1000);     //淡出 参数可以是毫秒，slow，fast 或者不填
            },function(){
                $("#p2").fadeIn("slow");
            },function(){
                $("#p2").fadeToggle();      //如果已经淡入则淡出
            },function(){
                $("#p2").fadeToggle();      //如果已经淡出则淡入
            },function(){
                $("#p2").fadeTo("fast",0.5);//淡化到指定透明度
            })

            //slide 滑入
            $("#b3").toggle(function(){
                $("#p3").slideDown(1000);   //滑入
            },function(){
                $("#p3").slideUp();         //滑出
            },function(){
                $("#p3").slideToggle();     //滑入滑出
            },function(){
                $("#p3").slideToggle();
            })

            //animate() 动画
            $("#b4").click(function(){
                $("#p4").animate(
                    {
                        left:"500px"
                    },1000
                );
            });
        })
    </script>
</head>
<body>
    <div>
        <p id="p1">显示隐藏</p>
        <p id="p2">淡入淡出</p>
        <p id="p3">滑入</p>
        <div id="p4" style="background-color: red;width:100px;height: 100px;position:relative;">动画</div>
    </div>
    <hr/>
    <div>
        <button id="b1">点击显示隐藏</button><br/>
        <button id="b2">淡入淡出</button><br/>
        <button id="b3">滑入</button><br/>
        <button id="b4">动画</button>
    </div>
</body>
</html>

踟蹰千年

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery（二）效果显示隐藏等

http://www.w3school.com.cn/jquery/jquery_ref_effects.aspjQuery 效果函数方法描述 animate() 对被选元素应用“自定义”的动画 clearQueue() 对被选元素移除所有排队的函数（仍未运行的） delay() 对被选元素的所有排队函数（仍未运行）设置延迟 dequeue(...
复制链接

扫一扫