javascript - CSS 对齐问题

Question

我想创建一个注册流程，用户必须在提供名称和密码之前接受 TOS。

这是屏幕截图，您会看到我遇到的问题:

http://screencast.com/t/3MF5LSIab (11 秒)

当用户在同意 TOS 后点击下一步时，div 会滑出屏幕，但下一个 div 会滑入第一个 div 下方，当第一个 div 消失时，第二个 div 会弹出到顶部。

编辑 - 添加缺失的代码

jQuery:

$('#tandc_next').click(function(){
    $('#tandc').hide("slide", { direction: "left" }, 1000);
    $('#account_info').show("slide", { direction: "right" }, 1000);
});

两个 div 的 CSS:

background-color: #fff;
border: 1px solid #999;
color: #000;
padding: 8px;
margin-bottom: 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;

父容器有这个:

.registration form > div {
    position: relative; }

html布局是:

div.registration
     form
        div#tandc
        div#account_info

如何让第二个 div 滑入，使每个 div 的顶部处于相同的高度？

Answer 1

你应该试试

.registration form > div {
    position: absolute;
    top:0px;
   }

这样，它们都将在其父级的顶部对齐。

编辑:问题是 jQuery 使用包装器来滑动，为了克服这种效果，您必须将它们包装在将定位的外部 div 中。

可以这样实现以下示例:http://jsfiddle.net/HKsHy/

使用下面的布局

div.registration
   form
      div
         div
      div
         div

并从上面添加 css(具有绝对定位的那个)

并使用以下 jQuery

$(".registration form > div").has("#account_info").css("display","none");

$('#tandc_next').click(function() {
    $('#tandc').hide("slide", {
        direction: "left"
    }, 1000);
    $(".registration form > div").has("#account_info").css("display","block");
    $('#account_info').show("slide", {
        direction: "right"
    }, 1000);
});

必须执行第一行以隐藏第二个 div。然后显示回来。在幻灯片中。

EDIT2:

您甚至可以使用超时实现更清晰的显示效果。像那样:

function showSecond(){
    $(".registration form > div").has("#account_info").show();
    $('#account_info').show("slide", {
        direction: "right"
    }, 1000);   
}
$('#tandc_next').click(function() {
    $('#tandc').hide("slide", {
        direction: "left"
    }, 1000);
    setTimeout(showSecond,500);       

});

此处示例:http://jsfiddle.net/HKsHy/1/