1

我有一个我在 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);
});
4

2 回答 2

1

您可以使用 jQuery 的:animated选择器来选择在选择器运行时动画正在进行中的所有元素。使用它，您可以从点击处理程序返回。

试试这个。

$(".btn-nav").click(function(){
    if($(".container:animated").length > 0)
        return;

    var pane = $(this).attr("pane");
    $(".container").fadeOut(600);
    $(".container."+pane).delay(605).fadeIn(600);
});
于 2013-03-15T02:49:02.033 回答
0

首先，如果您希望一个元素在前一个元素完成淡出之后淡入，最好将该代码放在回调中而不是使用delay. 至于您的实际问题，我建议使用简单的真/假锁来防止代码运行两次：

var locked = false;
$(".btn-nav").click(function(){
    if ( locked )
        return;
    locked = true;
    var pane = $(this).attr("pane");
    $(".container").fadeOut(600, function() {
        // Will run after the fade out has completed
        $(".container."+pane).fadeIn(600, function() {
            // Will run after the fade in has completed
            locked = false;
        });
    });
});
于 2013-03-15T02:45:35.137 回答