无法使用jQuery';s.animate()从左到右、从右到左为div设置动画?
我似乎很难使用jQuery无法使用jQuery';s.animate()从左到右、从右到左为div设置动画?,jquery,jquery-animate,Jquery,Jquery Animate,我似乎很难使用jQuery.animate()在按钮单击时从右向左,在另一个按钮单击时从左向右,为绝对定位的div设置动画。我想知道你是否愿意帮助我理解我做错了什么?谢谢下面是我的相关CSS、HTML和jQuery代码。我可以单击#moveLeft按钮,它确实会向左设置动画,但当我单击#moveRight按钮时,什么也没有发生。我哪里做错了 谢谢 CSS HTML 将其向右移动时,应将CSSleft设置为null 将其向右移动时,应将CSSleft设置为null 这真是太棒了!我可以问一下为什么
.animate()
在按钮单击时从右向左,在另一个按钮单击时从左向右,为绝对定位的div设置动画。我想知道你是否愿意帮助我理解我做错了什么?谢谢下面是我的相关CSS、HTML和jQuery代码。我可以单击#moveLeft
按钮,它确实会向左设置动画,但当我单击#moveRight
按钮时,什么也没有发生。我哪里做错了
谢谢
CSS
HTML
将其向右移动时,应将CSS
left
设置为null
将其向右移动时,应将CSS
left
设置为null
这真是太棒了!我可以问一下为什么我们需要将
left
设置为null,以便将其设置为右侧动画吗?顺便说一下,您不需要使用函数。啊,好的。我不知道。现在有道理了。谢谢。这真是太棒了!我可以问一下为什么我们需要将left
设置为null,以便将其设置为右侧动画吗?顺便说一下,您不需要使用函数。啊,好的。我不知道。现在有道理了。谢谢
#scorecardTwo {
position:absolute;
padding:5px;
width: 300px;
background-color:#E1E1E1;
right:0px;
top:0px;
display:none;
}
<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>
$("#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", "");
});
$("#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", "");
});