使用javascript设置div位置的动画

我有一个其他div的容器div，我正在尝试设置容器div位置的动画。通常我可以实现这个动画的东西，但我现在有一个问题。我正在尝试将这个div设置为屏幕中心的动画，因为当它设置为中心动画时，容器div后面会有一些其他内容（我想在容器div的帮助下隐藏这些内容），如果它没有固定在中心，内容（在容器div后面）从容器的左侧和/或右侧可见

当我将容器divs位置设置为时

CSS:

#cont{ position:absolute; right: auto; left: auto; top: 130px;}

#cont{ position:absolute; right:20px; left: auto; top: 130px;}

$('.open').on('click', function(){
        $('#cont').animate({"right":"auto"},1000)});

容器div显示在中间，在浏览器缩放时不移动。这是我想要在动画之后的位置

然后我像这样设置divs第一个位置和javascript动画

CSS:

#cont{ position:absolute; right: auto; left: auto; top: 130px;}

#cont{ position:absolute; right:20px; left: auto; top: 130px;}

$('.open').on('click', function(){
        $('#cont').animate({"right":"auto"},1000)});

这个css适合我。集装箱的初始位置非常适合我

JS:

#cont{ position:absolute; right: auto; left: auto; top: 130px;}

#cont{ position:absolute; right:20px; left: auto; top: 130px;}

$('.open').on('click', function(){
        $('#cont').animate({"right":"auto"},1000)});

但是当我点击“.open”元素时。什么也没发生

通常JS代码是有效的，因为我试图改变这样的位置：

在css中设置初始位置，如

right:auto和JS中的设置，如
“right”：“20px”

这是我遇到的问题，不是动画位置：


这是我尝试反转的小提琴（我将首字母“right”和“left”设置为
auto；
，然后在JS中更改）


那么，为什么div没有为第一小提琴中的位置设置动画呢？
您不能将动画设置为
auto
值-JS应该如何设置动画？假设从
20px
开始，它应该使用什么值来插值
21..22..23..
或
19..18..17..
（无法确定“目标”值应为多少）

正如你在评论中所说的，你希望它在之后居中。试着给
#cont
一个固定的宽度（比如
宽度：150px；
）。然后将动画设置到50%的右侧位置（
右侧：50%
），并使用适当的
右侧边距：-75px纠正边距像这样：

$('.open').on('click', function() {
    $('#cont').animate({
        "right":"50%",
        "marginRight":"-75px"
    }, 1000)
});

请参阅Fiddle:
您不能将动画设置为
auto
值-JS应该如何设置动画？假设从
20px
开始，它应该使用什么值来插值
21..22..23..
或
19..18..17..
（它无法确定“目标”值应该是什么）@MichaelRose-soo是否有其他方法可以将元素从其他位置设置为中心动画？在像+300%这样的缩放之后，它失败了，但我想这是一个好结果。所以，是的，这对我有用。