<style type="text/css">
		.btn{
			width: 200px;
			height:40px;
			line-height: 40px;
			background-color: #ddd;
			text-align: center;
			margin-bottom: 20px;
			border: 1px solid #989898;
		}
		.box{
			width: 300px;
			height: 300px;
			background-color:red;
			display: none;
			overflow: hidden;
		}
		.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 !important;
			opacity: 0 !important;
		}
		.sildeUpDownCollapse{
			height:0 !important; /* 加important是因为前面设置了box的宽，会因为优先级的问题而无效*/
			padding-top: 0 !important;   /* 加padding是因为盒子的高度可能没设置，是由padding撑开的*/
			padding-bottom: 0 !important;

			/*但如果高度是由box中的子元素撑开的，而父元素又没有设置高度和padding的话，那就不会又上下卷起的过渡效果，因为不知道按什么高度来进行过渡动画，这就需要在js中手动计算下*/
		}
		.slideLeftRight{
			width: 0 !important;
			padding-left: 0 !important;
			padding-right: 0 !important;
		}
	</style>

slideLeftRight:{   
		init:function($elem){
			// 先要获取box本身的宽，padding值，这样才能在show和hide里面使用，就不用直接写具体的值了
			var styles={};
			styles['width']=$elem.css('width');
			styles['padding-left']=$elem.css('padding-left');
			styles['padding-right']=$elem.css('padding-right');
			$elem.data('style',styles); 

			$elem.removeClass('transition');
			init($elem,function(){
				$elem.css({  //如果元素是隐藏状态的话，先初始化设置他的样式
					'width':0,
					'padding-left':0,
					'padding-right':0
				});
			});
			
		},

		show:function($elem){
			var sty=$elem.data('style');						
				// 先将元素显示出来，然后再执行动画，如果是css3写法的话，要考虑同步异步的问题
				show($elem,function(){				
					$elem.show(); 
					$elem.stop().animate({
						'width':sty['width'],
						'padding-left':sty['padding-left'],
						'padding-right':sty['padding-right']
					},
				function(){   //动画执行完毕之后的操作
					$elem.data('status','shown').trigger('shown');
				});
				});
				
			},
			hide:function($elem){
			// 先执行动画，然后再将元素隐藏起来
			hide($elem,function(){
				$elem.stop().animate({
					'width':0,
					'padding-left':0,
					'padding-right':0
				},
				function(){   //动画执行完毕之后的操作
					$elem.hide();
					$elem.data('status','hidden').trigger('hidden');
				});
			});
			
		}
	},

var $box=$('.box');
		js.fadeSlideUpDown.init($box);
		$('#btn-show').on('click',function(e){
			js.fadeSlideUpDown.show($box);
			
		});
		$('#btn-hide').on('click',function(e){
			js.fadeSlideUpDown.hide($box);
		});