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

我结束了此解决方案：

$("#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/

Answer 2

首先你需要将事件的JavaScript，而不是在html绑定。

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

为了防止滑动过程中的点击有很多种解决办法; 一个是定义一个全局变量。

var inprogress=false; 

在点击事件，你是否虚假你把它设置为true和exec你的动画变量是否为真/假 ，然后在动画回调将其设置为false。

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

我希望你的想法&让你完成你的事件处理程序，以满足您的需求