jQuery div slider prevent click while sliding

问题

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>

回答1:

first you need to bind your event in the javascript rather than in the html.

  var $body=$(document.body);
  $body.on({click: function() {}},"#NextButton");

to prevent click during sliding there are many solutions; one is to define a global variable.

  var inprogress=false;

upon click event you check whether that variable is true/false if false you set it to true and exec your anim, then set it back to false in the anim callback.

   $body.on({
      click: function() {
       if (!inprogress) {
          inprogress=true;
          $("#h_wrapper").animate({
                marginLeft: newMargin
             }, SlideSpeed, function() {
                   SetNavigationDisplay();
                   inprogress=false;
            });
          }
        }
       },"#NextButton");

i hope you get the idea & let you finalize your event handlers to fit your needs

回答2:

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/

来源：https://stackoverflow.com/questions/14772720/jquery-div-slider-prevent-click-while-sliding