Question

我有一个div列表，我在jQuery中用作链接。单击一个将淡出内容面板。我想要完成的是制作它，这样你就不能一直点击每一个导致面板堆叠和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);
});

Answer 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);
});

Answer 2

首先，如果你希望一个元素在前一个元素完成淡出后淡入，那么最好将该代码放在回调中而不是使用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;
        });
    });
});

防止jquery .click堆叠在列表上

2 个答案: