jquery - 如何在表单提交时进行页面滑动转换？

Question

我在 HTML 页面中有一系列表单，我想在表单提交和页面重新加载时滑入和滑出。这可能与 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();
        });
    });
});

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