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
<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> <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", "");
});
When moving it right, you should set the CSS left
to 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", "");
});
精彩评论