jQuery div滑块可防止滑动时单击

Question

我有一个基于jQuery的div滑块它就像一个符咒。

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

唯一的问题是，如果你点击两次，你可能会弄乱div的位置，并且你可能会得到一个空白区域，而上一个按钮仍然处于活动状态。

如何在它滑动/淡入淡出时禁用单击，直到div就位？

-参见以下代码：

<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

首先需要将事件绑定在javascript中，而不是html中。

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

为了防止滑动过程中点击，有许多解决方案；一种是定义一个全局变量。

  var inprogress=false;

单击事件后，检查该变量是否为true/false如果为false，则将其设置为true并执行anim，然后在anim回调中将其设置回false。

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

我希望你明白这个想法&让您最终确定您的事件处理程序以满足您的需求

Answer 2

我最终得到了这个解决方案：

$("#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() }); 
    }
});

我必须检查包装器或按钮是否已设置动画。如果两者都没有动画，那么我运行动画功能

请在此处查看：http://jsfiddle.net/UqSFr/1/