无法使用jQuery的.animate（）来从左到右，从右到左动画div？

Question

我似乎很难使用jQuery .animate()在按钮点击时从右到左动画一个绝对定位的div，并在另一个按钮点击时从左到右动画。我想知道你是否愿意帮我理解我做错了什么？谢谢。下面是我的相关CSS，HTML和jQuery代码。我可以单击#moveLeft按钮，它确实会将其设置为左侧动画，但是当我单击#moveRight按钮时，没有任何反应。我哪里错了？

谢谢！

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="link/to/stuff">text</a></span>
   <br />
   <span id = "scoreHolder">text</span>
   <br />
   <button type="button" id="moveLeft">Left</button>&nbsp;<button type="button" id="moveRight">Right</button>
 </div>

的jQuery

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

$("#moveLeft").bind("click", function() {

 var config = {
   "left" : function() { 
     return $(this).offset().left;
     },
    "right" : function() {
        return $("body").innerWidth() - $K("#scorecardTwo").width();
      }
  };

  $("#scorecardTwo").css(config).animate({"left": "0px"}, "slow");
  $(this).attr("disabled", "disabled");
  $("#moveRight").attr("disabled", "");
 });

 $("#moveRight").bind("click", function() {

   var config = {
     "left" : function() { 
       return $(this).offset().left;
      },
      "right" : function() {
       return $("body").innerWidth() - $K("#scorecardTwo").width();
      }
   };

   $("#scorecardTwo").css(config).animate({"right" : "0px"}, "slow");
   $(this).attr("disabled", "disabled");
   $("#moveLeft").attr("disabled", "");
 }); 

Answer 1

向右移动时，您应将CSS left设置为null。

Demo

$("#moveRight").click(function() {
    var config = {
        left: null,
        right: $("body").innerWidth() - $("#scorecardTwo").width()
    }

    $("#scorecardTwo").css(config).animate({right : "0px"}, "slow");
    $(this).attr("disabled", "disabled");
    $("#moveLeft").attr("disabled", "");
});