Animer absolument positionné div, mais arrêter si une condition est vraie?

Question

J'ai un div que je place dans le coin supérieur droit d'un site Web, positionné absolument à top: 0px et right : 0px. Je veux utiliser la fonction animée de jquery pour animer la div à gauche ou à droite une certaine quantité quand on clique sur un bouton, mais stopper l'animation si à tout moment, le décalage div à gauche ou à droite est inférieur à un certain nombre. Je veux faire cela pour accommoder les utilisateurs qui cliquent sur les boutons gauche ou droit plus d'une fois, de sorte que le div ne vole pas hors de vue. Comment fait-on cela? Ci-dessous mon css pertinent, html et code jquery:

CSS:

#scorecardTwo { 
    position:absolute; 
     padding:5px; 
     width: 300px; 
     background-color:#E1E1E1; 
     right:0px; 
     top:0px; 
     display:none; 
    } 

HTML:

 <div id = "scorecardTwo"> 
      <span id = "dealHolder"><a href="some/link">some text</a></span> 
      <br /> 
      <span id = "scoreHolder">some text</span> 
      <br /> 
      <button type="button" id="moveLeft">Left</button>&nbsp;<button type="button" id="moveRight">Right</button> 
     </div> 

jQuery (pour le moment):

$("#scorecardTwo").fadeIn("slow"); 

    $("#moveLeft").bind("click", function() { 
      $("#scorecardTwo").animate({"right":"+=76%"}, "slow"); 
          // how to stop animation if offset is less than appropriate number? 
    }); 

    $("#moveRight").bind("click", function() { 
      $("#scorecardTwo").animate({"right" : "-=76%"}, "slow"); 
          // how to stop animation if offset is less than appropriate number? 
    }); 

Answer 1

Une façon est de supprimer l'écouteur d'événement sur les boutons lorsque vous cliquez une fois, de sorte que l'utilisateur ne peut pas cliquer à nouveau:

$("#moveLeft").bind("click", function() { 
    $("#scorecardTwo").animate({"right":"+=76%"}, "slow"); 
    $(this).unbind('click', arguments.callee); 
}); 

Une autre façon serait de vérifier l'emplacement de chaque étape:

$("#moveLeft").bind("click", function() { 
    $("#scorecardTwo").animate({"right":"+=76%"}, { 
     speed: "slow", 
     step: function(right) { 
      if (right >= 70) { // stop at ~70 
       $("#scorecardTwo").stop(); 
      } 
     } 
    }); 
});