欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-05-06 08:02:21
...

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

先说一下通用参数

  1. speed:表示动画的速度

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

  2. easing:表示指定切换的效果

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

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

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

  1. 默认方式

    show(speed,easing,function)

    hide(speed,easing,function)

    toggle(speed,easing,function)

  2. 滑动显示与隐藏效果

    slideDown(speed,easing,function)

    slideUp(speed,easing,function)

    slideToggle(speed,easing,function)

  3. 淡入淡出显示与隐藏

    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>

相关标签: javaweb jquery