使用带有Tab内容移动的Jquery进行动画处理

Question

我是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>

感谢任何和所有的帮助，我似乎无法超越这一部分。

Answer 1

要通过设置填充动画来从左侧为新选项卡内容设置动画，您需要将初始填充设置为0（或其他一些值小于30％。并设置不透明度的动画，以便在0处启动不透明度我对你的css进行了一些细微的修改，默认显示标签1的内容，并将其他标签初始化为动画前的状态。不需要将tab1与其他标签区别对待。

jQuery(document).ready(function(){
    jQuery('.tabs .tab-links a').on('click', function(e){
    	var currentAttrValue = jQuery(this).attr('href');

        $('.tabs ' + currentAttrValue).show();
    		$('.tabs ' + currentAttrValue).animate({opacity:1, paddingLeft:'30%'}, 400); 
    		$('.tabs ' + currentAttrValue).siblings().css({opacity:0, paddingLeft:'0%'}).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;
	
}

#tab1 {padding-left: 30%;}
#tab2, #tab3, #tab4 { 
  display:none; 
  opacity: 0;
  padding-left: 0%;
}

.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>tab1 content</p>
    </div>

    <div id="tab2" class="tab">
      <p>tab2 content</p>
    </div>

    <div id="tab3" class="tab">
      <p>tab3 content</p>

    </div>

    <div id="tab4" class="tab">
      <p>tab4 content</p>
    </div>
  </div>
</div>