CODEWITHSUNDEEP
jqueryevents
jbolanos
jbolanos

Reputation: 625

preventing jquery .click from stacking on lists

I have a list of divs I'm using as links in jQuery. Clicking on one will fadeIn a content panel. What I'm trying to accomplish is making it so you can't keep clicking on each one causing the panels to stack and fadeIn and fadeOut in series. I want all other click to fail until the current action finishes.

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

Upvotes: 1

Views: 63

Answers (2)

ShankarSangoli
ShankarSangoli

Reputation: 69915

You can use jQuery's :animated selector which select all elements that are in the progress of an animation at the time the selector is run. Using this you can just return from the click handler.

Try this.

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

    var pane = $(this).attr("pane");
    $(".container").fadeOut(600);
    $(".container."+pane).delay(605).fadeIn(600);
});

Upvotes: 1

mgibsonbr
mgibsonbr

Reputation: 22007

First, if you want one element to fade in after the previous one finished fading out, it's better to put that code in a callback than using delay. As to your actual question, I'd suggest using a simple true/false lock to prevent the code from being run twice:

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

Upvotes: 0

Related Questions