Question

我有一个其他div的容器div，我正在尝试动画容器divs位置。通常我可以实现这个动画，但我现在遇到了问题。我试图将这个div设置为屏幕中心的动画，因为当它被设置为动画到中心时，容器div后面会有一些其他内容（我希望在容器div的帮助下隐藏），如果不是固定在中心，从容器的左侧和/或右侧可以看到内容（位于容器div后面）。

当我将容器divs position设置为;

CSS：

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

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

然后我设置div的第一个位置和这样的javascript动画;

CSS：

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

这个CSS适合我。容器的初始位置对我来说是完美的。

JS：

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

但是当我点击'.open'元素时。没有任何事情发生。

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

在right:auto;等css中设置初始位置，在"right":"20px"

中设置JS

这是我有问题的小提琴，不是动画的位置：

http://jsfiddle.net/ctarimli/B9h2w/3/

这是我试图反转的小提琴（我将初始的“右”和“左”设为auto;然后在JS中更改）

http://jsfiddle.net/ctarimli/B9h2w/5/

那么，为什么div不是第一个小提琴中的位置动画？

Answer 1

您无法为auto值制作动画 - JS应如何制作动画？假设您从20px开始，应该使用哪些值进行插值？ 21..22..23..或19..18..17..（它无法确定＆＃34;目标＆＃34;值应该是什么）

正如您在评论中所述，您希望它在之后居中。尝试给#cont一个固定的宽度（如width: 150px;）。然后设置为50％（right: 50%）的正确位置，并使用适当的margin-right: -75px;更正边距，如下所示：

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

请参阅小提琴：http://jsfiddle.net/B9h2w/17/

使用javascript动画div的位置

1 个答案: