为什么我运行jslideLeftRight时第一次是从中间展开，之后还上下铺开

来源：2-9 用js实现其他显示隐藏效果

慕用7018409

2020-07-11 11:40:57

<!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;
margin:0 auto;
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>
//发布订阅
function init(e,hiddenback){
  if(e.is(':hidden')){
   e.data('status','hidden');
   if(typeof hiddenback==='function'){hiddenback();}

  }else{
   e.data('status','shown');

  }
}

function show(e,callback){
  if(e.data('status')==='show')return;
  if(e.data('status')==='shown')return;


  e.data('status','show').trigger('show');
  callback();
}

function hide(e,callback){
  if(e.data('status')==='hide')return;
  if(e.data('status')==='hidden')return;

  e.data('status','hide').trigger('hide');
  callback();
}
var silent={
   init:function(){},
   show:function(e){
    show(e,function(){
     e.show();
     e.data('status','shown').trigger('shown');
    })
   },
   hide:function(e){

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

   }

};

var css3={
   fade:{
    init:function(e){
     css3._init(e,'fadeout');
    },
    show:function(e){
      css3._show(e,'fadeout');
    },
    hide:function(e){
      css3._hide(e,'fadeout');
    }
   },
   slideUpDown:{
    init:function(e){
     css3._init(e,'slideUpDown');
    },
    show:function(e){
     css3._show(e,'slideUpDown');
   },
    hide:function(e){
     css3._hide(e,'slideUpDown');
   }
   },
   slideLeftRight:{
    show:function(){

    },
    hide:function(){

    }
   },
   fadeSlideUpDown:{
    show:function(){

    },
    hide:function(){

    }
   },
   fadeSlideLeftRight:{
    show:function(){

    },
    hide:function(){

    }
   }
};
css3._init=function(e,className){
  e.addClass('transition');
  init(e,function(){
   e.addClass(className);
  });
};

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){
     var styles={};

     styles['width']=e.css('width');
     styles['padding-left']=e.css('padding-left');
     styles['padding-right']=e.css('padding-right');

     e.data('styles',styles);

     e.removeClass('transition');

     init(e,function(){
      e.css({
       'width':0,
       'padding-left':0,
       'padding-right':0
      });
     });
    },
    show:function(e){
     var styles=e.data('styles');

     e.show();
     e.stop().animate({
      'width':styles['width'],
      'padding-left':styles['padding-left'],
      'padding-right':styles['padding-right']
     },function(){
      e.data('status','shown').trigger('shown');
     })
    },
    hide:function(e){
    var styles=e.data('styles');

     e.hide();
     e.stop().animate({
      'width':0,
      'padding-left':0,
      'padding-right':0
     },function(){
      e.data('status','hidden').trigger('hidden');
     });
    }

   }
};

js._init=function(e){
  e.removeClass('transition');
  init(e);
}
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');
   });
  });
}
var box=$('#box');
js.slideLeftRight.init(box);

$('#btn1').on('click',function(){
  js.slideLeftRight.show(box);
});
$('#btn2').on('click',function(){
  js.slideUpDown.hide(box);
});

box.on('show shown',function(e){
  console.log(e.type);

})
box.on('hide hidden',function(e){
  console.log(e.type);

})
</script>
</body>
</html>