Jquery Div Slider Prevent Click While Sliding

I have a div slider based on jQuery It works like a charm. http://jsfiddle.net/7ChVu/15/ The only problem is that if you click twice you are likely to mess up the position of the d

Solution 1:

first you need to bind your event in the javascript rather than in the html.

var $body=$(document.body);
  $body.on({click: function() {}},"#NextButton");

to prevent click during sliding there are many solutions; one is to define a global variable.

var inprogress=false;

upon click event you check whether that variable is true/false if false you set it to true and exec your anim, then set it back to false in the anim callback.

   $body.on({
      click: function() {
       if (!inprogress) {
          inprogress=true;
          $("#h_wrapper").animate({
                marginLeft: newMargin
             }, SlideSpeed, function() {
                   SetNavigationDisplay();
                   inprogress=false;
            });
          }
        }
       },"#NextButton");

i hope you get the idea & let you finalize your event handlers to fit your needs

Solution 2:

I ended up with this solution:

$("#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() }); 
    }
});

I have to check if the wrapper or the button is animated. If neither is animated, then I run the animate function

See it here: http://jsfiddle.net/UqSFr/1/