老师，我按视频里敲得代码，咋运行不出来啊

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<style>
.btnall{
width:604px;
height:100px;
margin:0 auto;}
.btn{
width:300px;
height:100px;
float:left;
background-color:green;
border:1px solid black;
}
#box{
width:602px;
height:300px;
background-color:red;
position:relative;
left:50%;
margin-left:-301px;
display:none;
}
.transition{
transition:all 1s;
}
.fadeout{
visibility:hidden;
opacity:0;
}
.slideUpDown{
height:0 !important;}
</style>
<body>
<div class="btnall">
<button class="btn" id="btn1"></button>
<button class="btn" id="btn2"></button>
</div>
<div class="" id="box"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.js"></script>
<script src=../js/transition.js></script>
<script src=../js/showhide.js></script>

<script>

var box=$('#box');

  /* var showHide=window.mt.showHide(box,{
    css3:true,
    animation:'fade'
   });*/

   box.showHide({
    css3:true,
    animation:'fade'
   })

   $('#btn1').on('click',function(){
    //showHide.show(box);
   box.showHide('show');
   });
   $('#btn2').on('click',function(){
    //showHide.hide(box);
    box.showHide('hide');
   });
</script>
</body>
</html>

showhide.js

css3._show=function(e,className){
  show(e,function(){
  e.off('transitionend').one('transitionend',function(){
    e.data('status','shown').trigger('shown');
   })
   e.show();
   setTimeout(function(){
    e.removeClass(className);},30);
  });
  };
css3._hide=function(e,className){
  hide(e,function(){
  e.off('transitionend').one('transitionend',function(){

   e.data('status','hidden').trigger('hidden');
   e.hide();
  })

  setTimeout(function(){
   e.addClass(className);},30);

});
};
var js={
   fade:{
    init:function(e){
     js._init(e);
    },
    show:function(e){
     js._show(e,'fadeIn')

    },
    hide:function(e){
     js._hide(e,'fadeOut')
   }
   },
   slideUpDown:{
    init:function(e){
     js._init(e);
    },
    show:function(e){
     js._show(e,'slideDown');
    },
   hide:function(e){
    js._hide(e,'slideUp');
    }
   },
   slideLeftRight:{
    init:function(e){
    js._LRinit(e,{
     'width':0,
     'padding-left':0,
     'padding-right':0
    });

    },
    show:function(e){
     js._LRshow(e);
    },
   hide:function(e){
     js._LRhide(e,{
      'width':0,
      'padding-left':0,
      'padding-right':0
     });

   }
   },
   fadeslideUpDown:{
    init:function(e){
     js._LRinit(e,{
      'opacity':0,
      'height':0,
      'padding-top':0,
      'padding-bottom':0
     });

     },
     show:function(e){
      js._LRshow(e);
     },
    hide:function(e){
      js._LRhide(e,{
       'opacity':0,
       'height':0,
       'padding-top':0,
       'padding-bottom':0
      });

    }
   },
   fadeslideLeftRight:{
    init:function(e){
     js._LRinit(e,{
      'opacity':0,
      'width':0,
      'padding-left':0,
      'padding-right':0
     });

     },
     show:function(e){
      js._LRshow(e);
     },
    hide:function(e){
      js._LRhide(e,{
       'opacity':0,
       'width':0,
       'padding-left':0,
       'padding-right':0
      });

    }
   }
}
js._init=function(e,hiddenCallback){
  e.removeClass('transition');
  init(e,hiddenCallback);
};
js._show=function(e,mode){
  show(e,function(){
   e.stop()[mode](function(){
    e.data('status','shown').trigger('shown');
   });
  });
}
js._hide=function(e,mode){
  hide(e,function(){
   e.stop()[mode](function(){
    e.data('status','hidden').trigger('hidden');
   });
  });
}
js._LRinit=function(e,options){
  var styles={};

  for(var p in options){
   styles[p]=e.css(p);
  }

  e.data['styles']=styles;

   init(e,function(){
    e.removeClass('transition');
    js._init(e,function(){
     e.css(options);
    });


   });
}
js._LRshow=function(e){
  show(e,function(){
   var styles=e.data['styles'];

   e.show();

    e.stop().animate(styles,function(){
     e.data('status','shown').trigger('shown');
    });
  });
  }
js._LRhide=function(e,options){
  hide(e,function(){
   e.stop().animate(options,function(){
    e.data('status','hidden').trigger('hidden');
    e.hide();
   });
  });

}

var defaults={
   css3:false,
   js:false,
   animation:'fade'
}

function showHide(e,options){
  var mode=null;

  if(options.css3&&transition.isSupport){
   mode=css3[options.animation]||css3[defaults.animation];
   css3[options.animation].init(e);
   return{
    show:css3[options.animation].show,
    hide:css3[options.animation].hide
   };
  }else if(options.js){
   mode=js[options.animation]||css3[defaults.animation];
  }else{
   mode=silent;
  }

  mode.init(e);
  return{
   show:$.proxy(mode.show,this,e),
   hide:$.proxy(mode.show,this,e)
  }
}

$.fn.extend({
  showHide:function(option){
   return this.each(function(){
    var $this=$(this),
     options=$.extend({},defaults,typeof option===('object')&&option)
     mode=$this.data('showHide');

    if(!mode){
     $this.data('showHide',mode=showHide($this,options));
    }

    if(typeof mode[option]==='function'){
     mode[option]();
    }
   })
  }
})

window.mt=window.mt||{};
window.mt.showHide=showHide;

})(jQuery)

transition.js

(function () {
var transitionEndEventName = {
  transition: 'transitionend',
  MozTransition: 'transitionend',
  WebkitTransition: 'webkitTransitionEnd',
  OTransition: 'oTransitionEnd otransitionend'
};
var transitionEnd = '',
  isSupport = false;

for (var name in transitionEndEventName) {
  if (document.body.style[name] !== undefined) {
   transitionEnd = transitionEndEventName[name];
   isSupport = true;
   break;
  }
}

window.mt = window.mt || {};
window.mt.transition = {
end: transitionEnd,
isSupport: isSupport
};
})();

慕用7018409 2020-07-13

源自：实战：下拉菜单组件化 2-11 将显示隐藏封装成模块--完善