動畫使用jQuery與標籤內容移動

Question

我是新來的jQuery和我一直在尋找輕微的指導。我正在使用標籤內容構建頁面，但我遇到了一些小問題。我使用的動畫與我原本想要的完全相反。那麼我想要做什麼？當頁面啓動時，第一個選項卡處於活動狀態並顯示內容。當你點擊另一個標籤時，內容從左側移入（它隱藏在內容之外）。但由於某種原因，我似乎無法使用條件來分隔標籤的行爲。我不得不試着把這些標籤當作一個數組來處理，這樣它就可以避免使用第一個標籤了。這裏是我正在研究的內容。

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

.tab-content { 
 
\t background-color: #e5e5e5; 
 
\t color: #666; 
 
\t min-height: 150px; 
 
\t overflow: auto; \t 
 
} 
 

 
.tab-links{ 
 
\t float:left; 
 
} 
 
.tab-links:after { 
 
\t display:block; 
 
\t clear:both; 
 
\t content:''; 
 
} 
 

 
.tab-links li { 
 
\t list-style-type: none; 
 
\t background-color: #303030; 
 
\t 
 
\t text-transform: uppercase; 
 
\t letter-spacing: 0.09em; 
 
\t margin-left: -25%; 
 
\t 
 
} 
 
.tab-links li a { 
 
\t color: #f2f2f2; 
 
\t display: block; 
 
\t 
 
\t text-decoration: none; 
 
} 
 
    
 
.tab-links a:hover { 
 
\t background:#a7cce5; 
 
\t text-decoration:none; 
 
} 
 

 
.tab-links li.active, .tab-links li.hover { 
 
\t background-color: #e5e5e5; 
 
\t 
 
} 
 

 
.tab-links li.active a, .tab-links li a:hover { 
 
\t color: #666; 
 
\t 
 
} 
 

 
#tab2, #tab3, #tab4 { display:none; } 
 

 
.tab-content p { 
 
\t margin: 20px; 
 
\t text-indent: -40%; 
 
} 
 
    
 
.tab-content.active{ 
 
\t display: block; 
 
\t 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){ 
 
    \t var currentAttrValue = jQuery(this).attr('href'); 
 

 
     $('.tabs ' + currentAttrValue).show(); 
 
    \t \t $('.tabs ' + currentAttrValue).animate({opacity:1, paddingLeft:'30%'}, 400); 
 
    \t \t $('.tabs ' + currentAttrValue).siblings().css({opacity:0, paddingLeft:'0%'}).hide(); \t 
 
    \t \t 
 
     jQuery(this).parent('li').addClass('active').siblings().removeClass('active'); 
 
    \t \t 
 
    \t e.preventDefault(); 
 
    }); 
 
});

.tab-content { 
 
\t background-color: #e5e5e5; 
 
\t color: #666; 
 
\t min-height: 150px; 
 
\t overflow: auto; \t 
 
} 
 

 
.tab-links{ 
 
\t float:left; 
 
} 
 
.tab-links:after { 
 
\t display:block; 
 
\t clear:both; 
 
\t content:''; 
 
} 
 

 
.tab-links li { 
 
\t list-style-type: none; 
 
\t background-color: #303030; 
 
\t 
 
\t text-transform: uppercase; 
 
\t letter-spacing: 0.09em; 
 
\t margin-left: -25%; 
 
\t 
 
} 
 
.tab-links li a { 
 
\t color: #f2f2f2; 
 
\t display: block; 
 
\t 
 
\t text-decoration: none; 
 
} 
 
    
 
.tab-links a:hover { 
 
\t background:#a7cce5; 
 
\t text-decoration:none; 
 
} 
 

 
.tab-links li.active, .tab-links li.hover { 
 
\t background-color: #e5e5e5; 
 
\t 
 
} 
 

 
.tab-links li.active a, .tab-links li a:hover { 
 
\t color: #666; 
 
\t 
 
} 
 

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

 
.tab-content p { 
 
\t margin: 20px; 
 
\t text-indent: -40%; 
 
} 
 
    
 
.tab-content.active{ 
 
\t display: block; 
 
\t 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>