我无法弄清楚为什么我的 div 在 FadeOut 完成后不会淡入。
这是我的HTML:
<div class="header-container">
<header class="wrapper clearfix">
<ul class="nav nav-tabs">
<li class="active">
<a href="#tab1">Section 1</a>
</li>
<li>
<a href="#tab2">Section 2</a>
</li>
</ul>
</header>
</div>
<div class="main-container">
<div class="main wrapper clearfix">
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>Howdy, I'm in Section 2.</p>
</div>
</div>
</div> <!-- #main -->
</div> <!-- #main-container -->
我的JS
jQuery(document).ready(function(){
$('.nav-tabs a').click(function (e) {
e.preventDefault();
var href = $(this).attr('href'); // Select first tab
$('.tab-pane').fadeOut(1000,function(){
$(href).fadeIn(1000);
});
});
});
我的 CSS
.tab-pane {
display: none;
}
我做了一个jsfiddle:
http://jsfiddle.net/JohnnyDevv/hKq2K/1/
我让它尽可能简单......在此先感谢