js实现上下左右弹框划出效果

 

 从右侧划出

 从左侧划出

 从上面划下

 从下面划上

 右侧划出

 左侧划出

 从上面划下

 从上面划下

 $(function(){

 var rightBtn = $('#rightBtn'),leftBtn = $('#leftBtn'),topBtn = $('#topBtn'),botBtn = $('#botBtn');

 var oAside = $('#aside');

 rightBtn.on("click",function(){

 $('.leftContent').hide();

 $('.topContent').hide();

 $('.botContent').hide();

 $('.rightContent').show();

 oAside.addClass('active');

 });

 leftBtn.on("click",function(){

 $('.rightContent').hide();

 $('.topContent').hide();

 $('.botContent').hide();

 $('.leftContent').show();

 oAside.addClass('active');

 });

 topBtn.on("click",function(){

 $('.rightContent').hide();

 $('.leftContent').hide();

 $('.botContent').hide();

 $('.topContent').show();

 oAside.addClass('active');

 });

 botBtn.on("click",function(){

 $('.rightContent').hide();

 $('.leftContent').hide();

 $('.topContent').hide();

 $('.botContent').show();

 oAside.addClass('active');

 });

 $('.hideAside').on("click",function(){

 oAside.removeClass('active');

 });

 })