0

所以我在页面侧面有一个按钮，使用户能够转到下一张幻灯片（页面）

因为页面大小可以是不同的宽度，这是在开始时计算的

所以链接的作用是运行动画。如果我双击按钮虽然它动画很远

这是我的代码

jQuery(".nextSlide").click(function() {

slide("forward", pageSize);
    //for now assume pageSize is 950

});

function slide(data, pageSize) {
 var newLeft = calcLeft(data, pageSize);
 jQuery('#pageHolder').animate({
    left: newLeft
 }, 400, function() {
    calcNav(pageSize);
    calcPage(pageSize);
 });

}

function calcLeft(action, pageSize){
    // there will only ever be 4 slides. 0 is pos1)
var currentPos = currentPosition();
if (action == "back") {
    if (currentPos == "0") {
        left = -pageSize * 3;
    } else {    
        left = currentPos + pageSize ;  
    }

} else if (action == "forward") {

    if (currentPos == -pageSize * 3) {

        left = 0;
    } else {
        left = currentPos - pageSize ;  
    }
return left;    
}

function currentPosition() {
    var currentPosition = parseInt(jQuery("#pageHolder").css("left"), 10);
    return currentPosition;
}

所以如果用户点击按钮

<a href="#" class="nextSlide">next</a>

两次这会弄乱动画。

有什么方法可以确保

a) 当按钮被按下时，在动画完成之前不能再次按下

或者

b) 滑到下一张幻灯片，然后再次运行动画。

谢谢

4

2 回答 2

1

将您的点击事件绑定到一个函数，以便您可以自己控制点击处理。该函数应执行以下操作：

function clickHandler(event) {

    // If event isn't already marked as handled, handle it
    if(event.handled !== true) {

        // Kill event handler, preventing any more clicks
        $(".nextslide").die("click");

        // Do your stuff here
        slide("forward", pageSize);

        // Mark event as handled
        event.handled = true;
    }
    // Else
    return false;
}

// Bind click to handler for the first time
$('.nextslide').live("click", clickHandler);

如果它已经被点击，这将杀死元素上的事件。

然后在动画结束时，重新绑定事件：

// Rebind refresh click handler
$('.nextSlide').live("click", clickHandler);
于 2013-02-13T02:51:31.807 回答
0

Working example

jQuery(document).ready(function () {
 jQuery(".touchslider-prev").on("click", clickHandlerPrev);
});

function clickHandlerPrev(event) {

// If event isn't already marked as handled, handle it
if(event.handled !== true) {

    // Kill event handler, preventing any more clicks
    jQuery(".touchslider-prev").off("click");

    // Do your stuff here

    slide("back");

    // Mark event as handled
    event.handled = true;
} 


return false;
}

function slide(data) {

var newLeft = calcLeft(data, 950);

  jQuery('#pageHolder').animate({
    left: newLeft
  }, 400, function() {
    calcNav(950);
    calcPage(950);
    jQuery(".touchslider-prev").on("click", clickHandlerPrev);


  });

}
于 2013-02-14T01:05:12.660 回答