如何在表单提交上进行页面幻灯片转换？

Question

在提交表单并重新加载页面时，我在HTML页面中有一系列表单，我想slide in和slide out。这有可能与jquery？当页面加载到每个页面上或者我需要使用AJAX时，这可能会这样做吗？

Answer 1

是的，您可以设置页面的负边距，并在页面加载时将其滑入。 然后在提交点击动画页面并以程序方式提交表单：

的 Example

HTML：

<form id="theForm" action="/three">
    <div id="slidable">
        <button id="bt_submit">Submit</button>
    </div>
</form>

CSS：

#slidable {
    height:200px;
    width:200px;
    border:5px solid red;
    margin-left:-300px;
}

JQUERY

$(function () {
    $("#slidable").animate({
        "margin-left": 0
    }, 500);
    $("#bt_submit").click(function (ev) {
        ev.preventDefault();
        $("#slidable").animate({
            "margin-left": -300
        }, 500, function () {
            $("#theForm").submit();
        });
    });
});

• 该示例适用于红色方块，但您也可以调整选择器以选择整个页面。