我有一个我在 jQuery 中用作链接的 div 列表。单击一个将淡入内容面板。我想要完成的是让你不能一直点击每个导致面板堆叠和fadeIn 和fadeOut 串联。我希望所有其他点击都失败,直到当前操作完成。
HTML:
<div class="nav-row">
<ul>
<li><div class="btn-nav" pane="home">Home</div></li>
<li><div class="btn-nav" pane="experience">Experience</div></li>
<li><div class="btn-nav" pane="skills">Skills</div></li>
<li><div class="btn-nav" pane="links">Links</div></li>
<li><div class="btn-nav" pane="contact">Contact Me</div></div></li>
</ul>
</div>
<div class="container home">
Home
</div>
<div class="container experience">
Experience
</div>
<div class="container skills">
Skills
</div>
<div class="container links">
Links
</div>
<div class="container contact">
Contact
</div>
jQuery:
$(".btn-nav").click(function(){
var pane = $(this).attr("pane");
$(".container").fadeOut(600);
$(".container."+pane).delay(605).fadeIn(600);
});