Having trouble using jQuery's .animate() to animate a div from left to right, right to left?
- by Alex
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
text
text
Left Right
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", "");
});
