jQuery: preventing event from executing for duration of animation

Question

OK, I've checked this thread:

http://stackoverflow.com/questions/1012447/prevent-click-event-in-jquery-triggering-multiple-times

• and attempted to unbind/re-bind an event as described but to no avail. I basically have a slider gallery, with a next/prev button. I want to prevent the next button from being clicked for the duration of the animation.

  prev = $("#portfolio_nav_prev");
  next = $("#portfolio_nav_next");
  
  
  function nextAnim(){
      //remove handler
      next.unbind();
  
  
  gallery_frame.animate({scrollLeft:targetPos}, 300, 'easeInOutQuart',function(){next.bind(nextAnim)});
  return false;
  }
  
  
  

any ideas?

Answer 1

Here is the solution I ended up using - the problem was that the element was an anchor, so when I unbound the click animation - it tried to navigate away from the page, thus breaking the animation.

So, I unbound the event, then made click bind to return false:

next.unbind();
next.click(function(){return false;})

Then did the same in the animation callback, but binding it back to the animation.

gallery_frame.animate({scrollLeft:targetPos}, 300, 'easeInOutQuart',
function()next.unbind();next.bind('click',nextAnim)});

However, I think the real solution is to make the next/prev buttons out of some non-anchor element in the first place.