Question

我在每个周期（Fiddle）将元素附加到我的容器div，并以不同的位置（左，上，右，下）居中;但如果你看顶部位置它没有正确居中！那是为什么？

以中心位置为中心，我正在做：

         top: 0,
        right: (docWidth / 2) + $mainMenu.width()/2,
        left: (docWidth / 2) - $mainMenu.width()/2

第二个问题是，对于左侧位置，我不知道为什么我必须在以下代码中添加4：

         left: (docWidth - $mainMenu.width()-4),
            top: (docHeight / 2) - 20,
            bottom: (docHeight / 2) + 20

如果删除4，它将退出浏览器！为什么我需要4？

感谢任何帮助！

Answer 1

我看到两个问题：

问题＃1

关于在计算left位置时需要减去4，我相信这是因为每个按钮的文本内容可以超出其按钮的边界。

因此，当按钮一直移动到右侧时，其文本内容会超出窗口的边界并导致滚动条。

将overflow:hidden添加到按钮，以便文本内容不会溢出。

.menuBtn {
    ...
    overflow:hidden;
}

然后您可以删除-4：

left: (docWidth - $mainMenu.width()),

问题＃2

关于按钮没有位于最顶端的位置，我相信这是由两件事引起的。

首先，每个按钮都有一个左边距，包括行中的第一个按钮。这个边缘抛出了中心。从第一个按钮消除左边距：

#link1  {
    margin-left:0;
}

此外，由于您的动画功能是在计时器上运行的，因此可能会在上一个动画完成之前调用它。因此，计算出的按钮组宽度可能不准确。

我将你的函数调用移出计时器并进入最后一个动画的回调：

...
, 1000,function(){
    $( "#container" ).append( "<div class='menuBtn' ><span>test!</span></div>" );       
    my_animation();
})

解决这两个问题似乎有所帮助：