老师为什么点击显示之后会自动触发隐藏

# 粘贴全部相关代码，切记添加代码注释（请勿截图）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/base.css">
    <style>
        body {
            width: 400px;
            margin: 0 auto;
        }

        .btn {
            width: 50%;
            height: 30px;
            float: left;
        }

        #box {
            display: none;
            /* visibility: hidden;
            opacity: 1; */
            width: 100%;
            height: 200px;
            background-color: red;
            float: left;
        }

        .transition {
            -o-transition: all 0.5s;
            -ms-transition: all 0.5s;
            -moz-transition: all 0.5s;
            -webkit-transition: all 0.5s;
            transition: all 0.5s;
        }
        .fadeOut{
            visibility: hidden;
            opacity: 0;
        }
    </style>
</head>

<body>
    <button id="btn-show" class="btn">显示</button>
    <button id="btn-hide" class="btn">隐藏</button>
    <div id="box" class="transition fadeOut"></div>
    <script src="../js/jquery-3.5.1.js"></script>
    <script src='../js/showHide.js'></script>
    <script>
        var $box = $('#box');

        // $('#btn-show').on('click', function () {
        //     silent.show($box, function () {
        //         $box.html('<p>显示</p>');
        //     }, function () {
        //         setTimeout(function () {
        //             $box.html($box.html() + '<p>ok</p>');
        //         }, 1000)
        //     });
        // })
        // silent.init($box);
        $('#btn-show').on('click', function () {
            css3.fade.show($box);
        })
        // $box.on('show shown hide hidden', function (e) {
        //     if (e.type === 'show') {
        //         $box.html('<p>显示</p>');
        //     }
        //     else if (e.type === 'shown') {
        //         setTimeout(function () {
        //             $box.html($box.html() + '<p>ok</p>');
        //         }, 1000)
        //     }
        // })
        $box.on('show shown hide hidden', function (e) {
            console.log(e.type);
        })
        $('#btn-hide').on('click', function () {
            css3.fade.hide($box);
        })
    </script>
</body>

</html>

var silent = {
    init:function ($elem) {
        if($elem.is(':hidden')){
            $elem.data('status','hidden');
        }else{
            $elem.data('status', 'shown');
        }
    },
    show: function ($elem) {
        if($elem.data('status')==='show')return;
        if ($elem.data('status') === 'shown') return;

        $elem.data('status','show').trigger('show');
        $elem.show();
        $elem.data('status', 'shown').trigger('shown');

        // if(typeof showCallback==='function')showCallback();
        // $elem.show();
        // if(typeof shownCallback==='function')shownCallback();

    },
    hide: function ($elem) {
        if ($elem.data('status') === 'hide') return;
        if ($elem.data('status') === 'hidden') return;

        $elem.data('status', 'hide').trigger('hide');
        $elem.hide();
        $elem.data('status', 'hidden').trigger('hidden');
    }
};
var css3 = {
    fade: {
        show: function ($elem) {
            $elem.show();
            setTimeout(function (param) {
                $elem.removeClass('fadeOut');
            },20)

        },
        hide: function ($elem) {
            $elem.on('transitionend',function () {
                $elem.hide();
            })
            $elem.addClass('fadeOut');
        }
    },
    slideUpDown: {
        show: function () { },
        hide: function () { }
    },
    slideLeftRight: {
        show: function () { },
        hide: function () { }
    },
    fadeSlideUpDown: {
        show: function () { },
        hide: function () { }
    },
    fadeSlideLeftRight: {
        show: function () { },
        hide: function () { }
    }
};
var js = {
    fade: {
        show: function () { },
        hide: function () { }
    },
    slideUpDown: {
        show: function () { },
        hide: function () { }
    },
    slideLeftRight: {
        show: function () { },
        hide: function () { }
    },
    fadeSlideUpDown: {
        show: function () { },
        hide: function () { }
    },
    fadeSlideLeftRight: {
        show: function () { },
        hide: function () { }
    }
};