Hello,

I seem to be having difficulties using jQuery .animate() to animate an absolutely positioned div from right to left on a button click, and left to right on another button click. I was wondering if you would be willing to help me understand what I'm doing wrong? Thanks. Below is my relevant CSS, HTML, and jQuery code. I can click the #moveLeft button and it wil indeed animate it to the left, but when I click the #moveRight button, nothing happens. Where am I going wrong?

Thanks!!

CSS

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

HTML

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", ""); });