Jquery动画三种方式操作显示或隐藏

最新推荐文章于 2023-05-24 13:16:04 发布

破晓Dawn

最新推荐文章于 2023-05-24 13:16:04 发布

阅读量163

点赞数

分类专栏： javaweb 文章标签： jquery

本文链接：https://blog.csdn.net/qq_41093260/article/details/118443243

版权

javaweb 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

Jquery动画三种方式操作显示或隐藏

先说一下通用参数

speed:表示动画的速度

三个预定义的值(“slow”,“normal”,"fast)或直接传毫秒值(如:1000);

easing:表示指定切换的效果

swing:(默认值)表示动画执行速度,先慢中快后慢,起步加速减速

linear:动画执行速度为匀速状态

function:在动画执行完会执行的函数,每个元素执行一次

默认方式

show(speed,easing,function)

hide(speed,easing,function)

toggle(speed,easing,function)
滑动显示与隐藏效果

slideDown(speed,easing,function)

slideUp(speed,easing,function)

slideToggle(speed,easing,function)
淡入淡出显示与隐藏

fadeIn(speed,easing,function)

fadeOut(speed,easing,function)

fadeToggle(speed,easing,function)

代码演练

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
    <script>
        //点击按钮隐藏div
        function hideFn(){
            //默认效果
            // $("#showDiv").hide("slow","swing");

            //滑动
            // $("#showDiv").slideUp("fast");

            //淡入淡出
            $("#showDiv").fadeOut("slow");
        }

        //点击按钮显示div
        function showFn(){
            //默认效果
            // $("#showDiv").show("normal","linear",function(){
            //     // alert("显示完毕");
            // });

            //滑动
            // $("#showDiv").slideDown("slow");

            //淡入淡出
            $("#showDiv").fadeIn("normal");
        }

        //点击按钮切换div显示和隐藏
        function toggleFn(){
            //默认效果
            // $("#showDiv").toggle("fast",function(){
            //     console.log("改变了");
            // })

            //滑动
            // $("#showDiv").slideToggle("normal");

            //淡入淡出
            $("#showDiv").fadeToggle(5000,"swing");
        }

    </script>
</head>
<body>
<input type="button" value="点击按钮隐藏div" onclick="hideFn()">
<input type="button" value="点击按钮显示div" onclick="showFn()">
<input type="button" value="点击按钮切换div显示和隐藏" onclick="toggleFn()">

<div id="showDiv" style="width:300px;height:300px;background:pink">
    div显示和隐藏
</div>
</body>
</html>

破晓Dawn

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Jquery动画三种方式操作显示或隐藏

Jquery动画三种方式操作显示或隐藏先说一下通用参数speed:表示动画的速度三个预定义的值(“slow”,“normal”,"fast)或直接传毫秒值(如:1000);easing:表示指定切换的效果swing:(默认值)表示动画执行速度,先慢中快后慢,起步加速减速linear:动画执行速度为匀速状态function:在动画执行完会执行的函数,每个元素执行一次默认方式show(speed,easing,function)hide(speed,easing,fu
复制链接

扫一扫