Question

http://vc4hp.net/temp/4/test.htm

If you click “Scroll Left” rapidly you should be able to click it at least a few times in a row.

Then you need to click “Scroll Right” lots of times but it eventually works.

Then the next time “Scroll Left” never seems to work again…

(BTW I can’t seem to get it to work at all in jsfiddle: http://jsfiddle.net/3Dmya/ )

Answer 1

My solution prevents a double trigger on the animation, it only binds to the button that should be able to trigger, and unbinds as soon as it is clicked:

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);
});
​

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