Question

I have a div slider based on jQuery
It works like a charm.

http://jsfiddle.net/7ChVu/15/

The only problem is that if you click twice you are likely to mess up the position of the divs, and you can end up with an empty area with the previous button still active.

How do I disable clicks while it slides/fades and until the div is in place?

-See code below:

<style>
a, a:link, a:visited, a:hover, a:active {
color: #666;
text-decoration:none; }

a:hover {
font-weight:bold; }

a:visited {
color: #999; }

#h_container {
width: 200px;
overflow: hidden; }

#h_wrapper {
width: 600px; }

.h_slide {
width: 200px;
height: 200px;
overflow: hidden;
float: left; }
</style>

<script>
var SlideWidth = 200;
var SlideSpeed = 500;

$(document).ready(function() {
    // set the prev and next buttons display
    SetNavigationDisplay();
});

function CurrentMargin() {
    // get current margin of slider
    var currentMargin = $("#h_wrapper").css("margin-left");

    // first page load, margin will be auto, we need to change this to 0
    if (currentMargin == "auto") {
        currentMargin = 0;
    }

    // return the current margin to the function as an integer
    return parseInt(currentMargin);
}

function SetNavigationDisplay() {
    // get current margin
    var currentMargin = CurrentMargin();

    // if current margin is at 0, then we are at the beginning, hide previous
    if (currentMargin == 0) {
        $("#PreviousButton").fadeOut();
    } else {
        $("#PreviousButton").fadeIn();
    }

    // get wrapper width
    var wrapperWidth = $("#h_wrapper").width();

    // turn current margin into postive number and calculate if we are at last slide, if so, hide next button
    if ((currentMargin * -1) == (wrapperWidth - SlideWidth)) {
        $("#NextButton").fadeOut();
    } else {
        $("#NextButton").fadeIn();
    }
}

function NextSlide() {
    // get the current margin and subtract the slide width
    var newMargin = CurrentMargin() - SlideWidth;

    // slide the wrapper to the left to show the next panel at the set speed. Then set the nav display on completion of animation.
    $("#h_wrapper").animate({
        marginLeft: newMargin
    }, SlideSpeed, function() {
        SetNavigationDisplay()
    });
}

function PreviousSlide() {
    // get the current margin and subtract the slide width
    var newMargin = CurrentMargin() + SlideWidth;

    // slide the wrapper to the right to show the previous panel at the set speed. Then set the nav display on completion of animation.
    $("#h_wrapper").animate({
        marginLeft: newMargin
    }, SlideSpeed, function() {
        SetNavigationDisplay()
    });
}
</script>

<!--- DISPLAY CONTAINER --->
<div id="h_container">
    <!-- OUTTER WRAPPER -->
    <div id="h_wrapper">
        <!-- SLIDE 1 -->
        <div id="slide1" class="h_slide">
            <p>Part 1</p>
        </div>
        <!-- SLIDE 2 -->
        <div id="slide2" class="h_slide">
           <p>Part 2</p>
    </div>
    <!-- SLIDE 3 -->
    <div id="slide3" class="h_slide">
        <p>Part 3</p>
    </div>
</div>

<!--- NAVIGATION BUTTONS -->
<table style="width:200px; padding: 0 10px 0 10px;">
<tbody>
    <tr>
        <td align="left"><a href="javascript:void(0)" onclick="PreviousSlide()" id="PreviousButton"
            style="display:none">&laquo; Previous</a>

        </td>
        <td align="right"><a href="javascript:void(0)" onclick="NextSlide()" id="NextButton">Next &raquo;</a>

        </td>
    </tr>
</tbody>

Answer 1

I ended up with this solution:

$("#NextButton").on("click", function() { 
if ( $("#h_wrapper").is(':not(:animated)') && $("#NextButton").is(':not(:animated)') ) {
    var newMargin = CurrentMargin() - SlideWidth;
    $("#h_wrapper").animate({ marginLeft: newMargin }, SlideSpeed, function () { SetNavigationDisplay() }); 
    }
});

I have to check if the wrapper or the button is animated. If neither is animated, then I run the animate function

See it here: http://jsfiddle.net/UqSFr/1/