Jquery 显示隐藏动画

1 三种方式显示和隐藏

a 默认隐藏和显示

show(speed,[easing],[fn]) //默认显示
speed：动画的速度 easing:用来指定切换的效果取值swing linner匀速

fn：动画完成时要执行的函数

hide(speed,[easing],[fn]) //隐藏

toggle(speed,[easing],[fn]);//替换

 b 滑动显示和隐藏

slideDown(speed,[easing],[fn]);

slideUp(speed,[easing],[fn]);

slideToggle(speed,[easing],[fn]);

 c: 淡入和淡出显示方式

fadeIn(speed,[easing],[fn]);

fadeOut(speed,[easing],[fn]);

fadeToggle(speed,[easing],[fn]);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.min.js"></script>
    <style>
        #showdiv{
           text-align: center;
        }
    </style>
    <script type="text/javascript">
        function hideFn() {
            // 隐藏
            //默认隐藏
            // $("#showdiv").hide(5000,"linear");
            //滑动隐藏
            // $("#showdiv").slideUp(3000,"swing");
            //淡出
            $("#showdiv").fadeOut(3000,"swing");
        }
        // 显示
        function showFn() {
            //默认方式
            // $("#showdiv").show(5000,"linear");
            //滑动显示
            // $("#showdiv").slideDown(3000,"swing");
            //淡入淡出
            $("#showdiv").fadeIn(3000,"swing");
        }

        //替换效果 显示和隐藏
        function toggleFn() {
            //默认方式
            // $("#showdiv").toggle(3000,"swing");
            //滑动显示方式
            // $("#showdiv").slideToggle(3000,"swing");
            //淡入淡出方式
            $("#showdiv").fadeToggle(3000,"swing",[alert("淡出")]);
        }

    </script>
</head>
<body>
<input type="button" value="点击按钮 隐藏div" onclick="hideFn()"/>
<input type="button" value="点击按钮 显示div" onclick="showFn()"/>
<input type="button" value="点击按钮 显示和隐藏切换" onclick="toggleFn()"/>
<div id="showdiv">
    <img width="550px" height="550px" src="img/2.jpg" alt="">
</div>

</body>
</html>

Jquery 显示隐藏动画

1 三种方式显示和隐藏

猜你喜欢