Javascript 当前位置的jquery动画

我希望动画从元素的当前位置开始，在这种情况下：第一次从70%的右侧单击，第二次从元素位于动画之后的位置单击。（请遵守守则）

$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
screenWidth=Math.round（$（“html”）.width（）/2）
positionLeft=数学圆（$（“.container”）.offset（）.left）
如果（位置左<屏幕宽度）{
$（“.container”）.css（'右'，“自动”）；
$（“.container”）.animate({
左：“50%。”
}, 1000);
}如果（positionLeft==屏幕宽度）{
$（“.container”）.css（'左'，“自动”）；
$（“.container”）.animate({
右图：“50%。”
}, 1000); 	
}
});
});
.container{
背景色：黑色；
身高：50%；
宽度：20%；
位置：绝对位置；
最高：30%；
右：70%；
}

调试
点击
单击按钮时，您希望设置
左
选择器的动画，因此您将右%设置为自动（左%也设置为自动），这会将元素跳转到左边距-左/右都设置为自动的位置。然后动画开始

有几种方法可以解决这个问题。一种是只设置右选择器的动画，而不是左选择器的动画（参见答案底部的JSFIDLE演示）

另一个是交换它们。您只需将
right
设置为auto，这会使left也处于auto状态。您必须将right设置为auto，left设置为10%（即100-70=30%减去容器宽度20%，等于10%）。我在回答嵌入式代码中这样做是为了向您展示，当您切换回在第三次按钮单击中设置正确百分比的动画时，同样的问题也会发生

最好的解决方案是只使用一个选择器（左选择器或右选择器）设置所有内容的动画。选择一个并坚持下去


$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
screenWidth=Math.round（$（“html”）.width（）/2）
positionLeft=数学圆（$（“.container”）.offset（）.left）
如果（位置左<屏幕宽度）{
$（“.container”）.css（{'right'：'auto'，'left'：'10%}）；
$（“.container”）.animate({
左：“50%。”
}, 1000);
}如果（positionLeft==屏幕宽度）{
$（“.container”）.css（{'left'：'auto'，'right'：'30%}）；
$（“.container”）.animate({
右图：“50%。”
}, 1000); 	
}
});
});
.container{
背景色：黑色；
身高：50%；
宽度：20%；
位置：绝对位置；
最高：30%；
右：70%；
}

调试
点击
我还找到了您在上面编写的解决方案和代码的thx，但当您用鼠标调整窗口大小时，这些解决方案就失败了。这就是为什么需要同时使用左和右。你确定没有办法吗？如果你只设置右侧的动画，它应该可以解决问题，并且在调整窗口大小时仍然可以工作（至少和当前的设计一样好）。有关“响应性”（重新调整规模）网站设计的更多信息。