K.Thomas K.Thomas - 7 months ago 10
Javascript Question

Animate using Jquery with Tab content movement

I'm new to JQuery and I was looking for slight guidance. I was building a page using tabbed content, but I'm running into slight problems. The animation I was using worked in the exact opposite way I had intended. So what am I trying to do? When the page launches the first tab is active and the content is displayed. When you click on another tab the content moves in from the left (it is hidden off the content). But for some reason, I can't seem to use a conditional to separate the behavior of the tabs. I had to tried to treat the tabs as if they were in an array so that it would avoid the first tab.Here is the piece that I'm working on.



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>




Any and all help is appreciated, I can't seem to get past this part.

Answer

To animate the new tab content in from the left by animating the padding, you need to set the initial padding to 0 (or some other value less than 30%. And to animate the opacity you need to start the opacity at 0. I made a couple of slight modifications to your css, to show the tab 1 content by default and initialize the other tabs to their pre-animation state. There is no need to treat tab1 any differently from the other tabs.

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>

Comments