javascript - 使用带有 Tab 内容移动的 Jquery 制作动画

Question

我是 JQuery 的新手，我正在寻找一些指导。我正在使用选项卡式内容构建页面，但遇到了一些小问题。我使用的动画效果与我预期的完全相反。那我要做什么？当页面启动时，第一个选项卡处于 Activity 状态并显示内容。当您单击另一个选项卡时，内容会从左侧移入(它隐藏在内容之外)。但出于某种原因，我似乎无法使用条件来分隔选项卡的行为。我不得不尝试将选项卡视为数组中的选项卡，以便避免第一个选项卡。这是我正在处理的部分。

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>