Question

如果您快速点击“向左滚动”，您应该能够连续至少点击几次。

然后你需要多次点击“向右滚动”，但最终会有效。

然后下一次“向左滚动”似乎永远不会再起作用了......

（顺便说一下，我似乎无法在jsfiddle中完成它的工作：http://jsfiddle.net/3Dmya/）

Answer 1

我的解决方案阻止动画上的双触发器，它只绑定到应该能够触发的按钮，并在单击时立即解除绑定：

var scrolltime = 1000;

var scroll_left = function(e) {
  $('#scroll_left').unbind('click');
  $('#scroll_right').click(scroll_right);
  $('#left_content').animate({
    left: '-50%'
  }, scrolltime, function() {
    // Animation complete.
  });
  $('#right_content').animate({
    left: '50%'
  }, scrolltime, function() {
    // Animation complete.
  });
}

var scroll_right = function(e) { 
  $('#scroll_right').unbind('click');
  $('#scroll_left').click(scroll_left);
  $('#left_content').animate({
    left: '50%'
  }, scrolltime, function() {
    // Animation complete.
  });
  $('#right_content').animate({
    left: '150%'
  }, scrolltime, function() {
    // Animation complete.
  });
}

$(document).ready(function(){    
    $('#scroll_left').click(scroll_left);
    //$('#scroll_right').click(scroll_right);
});

小提琴：http://jsfiddle.net/3Dmya/3/

Answer 2

http://jsfiddle.net/3Dmya/4/

调用$.stop()似乎对我有用，但我无法可靠地重现该错误。

将第一个参数设置为true的

stop清除当前动画队列，因此当重复单击该按钮时，只会执行一个绑定的动画事件。

http://api.jquery.com/stop/

var scrolltime = 3000;

$('#scroll_left').click(function(e) {
    $('#left_content').stop(true).animate({
        left: '-50%'
    }, scrolltime, function() {
        // Animation complete.
    });
    $('#right_content').stop(true).animate({
        left: '50%'
    }, scrolltime, function() {
        // Animation complete.
    });
});

$('#scroll_right').click(function(e) {
    $('#left_content').stop(true).animate({
        left: '50%'
    }, scrolltime, function() {
        // Animation complete.
    });
    $('#right_content').stop(true).animate({
        left: '150%'
    }, scrolltime, function() {
        // Animation complete.
    });
});

如果点击过快，jQuery滚动按钮将停止工作

2 个答案: