向CSS/JS標籤添加淡入淡出效果

嗨，大家好，我得到了這個JS代碼，並且希望在切換標籤頁時添加輕微的淡入淡出效果，所以看起來更平滑。向CSS/JS標籤添加淡入淡出效果

<script type="text/javascript"> 
$(document).ready(function(){ 
    initTabs(); 
}); 

function initTabs() { 
    $('#tabMenu a').bind('click',function(e) { 
    e.preventDefault(); 
    var thref = $(this).attr("href").replace(/#/, ''); 
    $('#tabMenu a').removeClass('active'); 
    $(this).addClass('active'); 
    $('#tabContent div.content').removeClass('active'); 
    $('#'+thref).addClass('active'); 
    }); 
}

這是相應的HTML：

<ul id="tabMenu"> 
    <li><a id="tab_1" class="active" href="#1">Tab 1</a></li> 
    <li><a id="tab_2" class="" href="#2">Tab 2</a></li> 
</ul> 
<div id="tabContent"> 
    <div id="1" class="content active"></div> 
    <div id="2" class="content"></div> 
</div>

來源

2011-06-06 Dominik

請將您所提供的CSS得心應手同樣，這裏是一個JSFiddle，代碼如下你輸入了它 - 編輯並重新保存！ http://jsfiddle.net/HyeU2/ – Codecraft 2011-06-06 16:53:28

你看過jQuery UI標籤嗎？他們預裝了這個已經完成。 http://jqueryui.com/demos/tabs/ – chrisjlee 2011-06-06 17:00:08

更新了jsfiddle。不想使用jQuery UI，我已經包含了jQuery框架，不想使用第二個庫 – Dominik 2011-06-06 17:05:28

試試這個：

取代：

$('#tabContent div.content').removeClass('active'); 
$('#'+thref).addClass('active');

由：

$('#tabContent div.content[id!='+thref+']').fadeOut('slow', function(){ 
     $('#'+thref).fadeIn('slow'); 
});

來源

2011-06-06 17:20:03 manji

謝謝，作品真棒！ – Dominik 2011-06-06 17:38:01

看那FadeIn和FadeOut方法。

使用起來相當簡單：

來源

2011-06-06 16:53:00

是的，我用fadeIn和fadeOut測試了一些東西，但無法使它工作：\ – Dominik 2011-06-06 17:07:13

向CSS/JS標籤添加淡入淡出效果

回答

相關問題