使用Jquery和Tab内容移动制作动画

我是JQuery的新手，我一直在寻求一些指导。我使用选项卡式内容构建了一个页面，但遇到了一些小问题。我使用的动画以完全相反的方式工作。那么我想做什么呢？当页面启动时，第一个选项卡处于活动状态，并显示内容。当您单击另一个选项卡时，内容会从左侧移入（它隐藏在内容之外）。但由于某种原因，我似乎无法使用条件来分隔选项卡的行为。我不得不试着把标签当作一个数组来处理，这样就可以避免第一个标签。这是我正在处理的部分。

jQuery(document).ready(function(){
    jQuery('.tabs .tab-links a').on('click', function(e){
    	var currentAttrValue = jQuery(this).attr('href');
    		
    	if($('li:gt(0)')){
    		$('.tabs ' + currentAttrValue).animate({opacity:1, paddingLeft:'30%'}, 400);
    		$('.tabs ' + currentAttrValue).fadeIn(400).siblings().hide();	
    	}else if($('li:lt(1)')){
                $('.tabs ' + currentAttrValue).fadeIn(400).siblings().hide();
}
    		
    	jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
    		
    	e.preventDefault();
    	});
    });

.tab-content {
	background-color: #e5e5e5;
	color: #666;
	min-height: 150px;
	overflow: auto;	
}
.tab-links{
	float:left;
}
.tab-links:after {
	display:block;
	clear:both;
	content:'';
}
.tab-links li {
	list-style-type: none;
	background-color: #303030;
	
	text-transform: uppercase;
	letter-spacing: 0.09em;
	margin-left: -25%;
	
}
.tab-links li a {
	color: #f2f2f2;
	display: block;
	
	text-decoration: none;
}
 
.tab-links a:hover {
	background:#a7cce5;
	text-decoration:none;
}
.tab-links li.active, .tab-links li.hover {
	background-color: #e5e5e5;
	
}
.tab-links li.active a, .tab-links li a:hover {
	color: #666;
	
}
#tab2, #tab3, #tab4 { display:none; }
.tab-content p {
	margin: 20px;
	text-indent: -40%;
}
 
.tab-content.active{
	display: block;
	text-indent: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs">
  <ul class="tab-links">
    <li class="active"><a href="#tab1">Tab1</a></li>
    <li><a href="#tab2">Tab2</a></li>
    <li><a href="#tab3">Tab3</a></li>
    <li><a href="#tab4">Tab4</a></li>
  </ul>
  <div class="tab-content">
    <div id="tab1" class="tab active">
      <p>sdaksjdalkjflksjfkjsaf</p>
    </div>
    <div id="tab2" class="tab">
      <p>weiwoqoiehwqwhdjsakdnma</p>
    </div>
    <div id="tab3" class="tab">
      <p>ryqwurioqwiijdipqjdqpdjo</p>
    </div>
    <div id="tab4" class="tab">
      <p>asdlksjdksjdlaskjdkasjdlkaj</p>
    </div>
  </div>
</div>