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

我希望你的想法&讓你完成你的事件處理程序，以滿足您的需求