Javascript 浮动div和滑动动画的奇怪行为

我试图实现一个多步骤的形式，每个面板将滑出和滑入按钮点击

我已经设法建立了这个机制，但在测试时遇到了障碍

复制步骤：

单击“下一步”转到面板2

单击“上一步”返回面板1

在这种情况下，面板3以某种方式进入画面，并位于面板1下方。为什么会这样？为什么不把它藏起来

但是，如果一直转到面板3，然后尝试返回到面板1，则一切正常。如果我不去看所有的面板，它才会断

var global={}；
global.main_width=$（'#nl multi-form'）.outerWidth（）；
global.nof=$（'#fieldset fieldset'）.length；
global.fieldset_width=global.main_width；
$（'#fieldset'）.css（'width'，global.nof*global.fieldset_width）；
$（'#fieldset fieldset'）.css（'width'，global.fieldset_width）；
$（'.nl next'）。在（'click'，函数（e）{
e、 预防默认值（）；
var$单击按钮=$（此按钮）；
变量$fieldset=$clicked_按钮。最近（'fieldset'）；
var$nextFieldset=$fieldset.next（）；
var fieldset_width=$fieldset.outerWidth（）；
$fieldset.animate({
marginLeft:-字段集_宽度+'px'
}, 300);
$nextFieldset.animate（{
marginLeft:0+'px'
}, 300);
});
$（'.nl-previous'）。在（'click'，函数（e）{
e、 预防默认值（）；
var$单击按钮=$（此按钮）；
变量$fieldset=$clicked_按钮。最近（'fieldset'）；
var$prevFieldset=$fieldset.prev（）；
var fieldset_width=$fieldset.outerWidth（）；
$fieldset.animate({
marginLeft:fieldset_width+'px'
}, 300);
$prevFieldset.animate({
marginLeft:0+'px'
}, 300);
});
#nl多格式{
边缘顶部：10px；
位置：相对位置；
溢出：隐藏；
}
.清楚{
明确：两者皆有；
}
#nl多表单字段集{
边框：1px实心#ccc；
最小高度：100px；
浮动：左；
}
.nl小组{
填充：10px；
}
.nl导航{
文本对齐：右对齐；
垫底：10px；
}
.nl导航按钮{
左边距：10px；
}

这是第一小组
下一个
这是第二小组
上下
这是第三小组
先前提交
好的，我找到了解决您问题的方法。您必须为除第一个面板外的所有面板初始化左边距

$('#fieldset fieldset:not(:first-child)').css('margin-left', global.fieldset_width);


var global={}；
global.main_width=$（'#nl multi-form'）.outerWidth（）；
global.nof=$（'#fieldset fieldset'）.length；
global.fieldset_width=global.main_width；
$（'#fieldset'）.css（'width'，global.nof*global.fieldset_width）；
$（“#字段集字段集：非（：第一个子项）”）.css（'margin-left'，global.fieldset_-width）；
$（'#fieldset fieldset'）.css（'width'，global.fieldset_width）；
$（'.nl next'）。在（'click'，函数（e）{
e、 预防默认值（）；
var$单击按钮=$（此按钮）；
变量$fieldset=$clicked_按钮。最近（'fieldset'）；
var$nextFieldset=$fieldset.next（）；
var fieldset_width=$fieldset.outerWidth（）；
$fieldset.animate({
marginLeft:-字段集_宽度+'px'
}, 300);
$nextFieldset.animate（{
marginLeft:0+'px'
}, 300);
});
$（'.nl-previous'）。在（'click'，函数（e）{
e、 预防默认值（）；
var$单击按钮=$（此按钮）；
变量$fieldset=$clicked_按钮。最近（'fieldset'）；
var$prevFieldset=$fieldset.prev（）；
var fieldset_width=$fieldset.outerWidth（）；
$fieldset.animate({
marginLeft:fieldset_width+'px'
}, 300);
$prevFieldset.animate({
marginLeft:0+'px'
}, 300);
});
#nl多格式{
边缘顶部：10px；
位置：相对位置；
溢出：隐藏；
}
.清楚{
明确：两者皆有；
}
#nl多表单字段集{
边框：1px实心#ccc；
最小高度：100px；
浮动：左；
}
.nl小组{
填充：10px；
}
.nl导航{
文本对齐：右对齐；
垫底：10px；
}
.nl导航按钮{
左边距：10px；
}

这是第一小组
下一个
这是第二小组
上下
这是第三小组
先前提交
最好的选择是使用SO自己的代码段系统，它的工作原理与JSFIDLE非常相似。不需要链接到x年后可能不再存在的站点。加上所有的代码都是这样的，似乎还没有解决它。面板3仍然位于面板1下方（对不起，现在肯定已修复）是的，我已经找出了错误。现在看来确实管用了。但是，您能否解释一下为什么需要在所有后续面板上初始化
左边距
！首先，他使用jqueryanimate，这是一种不好的做法。其次，他设置
左边距
的动画，以轰炸浏览器渲染路径^^^@DenisIvanov那么，实现同样目标的最佳方式是什么？