Question

我正在尝试将表单移动几个像素，但这不起作用。我不知道为什么。

当我提交时调用该函数（我已使用alert（）测试它），但css部分不起作用。

这是代码：

<!DOCTYPE>    
<html>

<head>
    <title> Pagina de Luis </title>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Londrina+Solid' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Special+Elite' rel='stylesheet' type='text/css'>


    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#formulario").submit(function (event) {
                $(this).css({
                    top: -50 px;
                });

            });

        });
    </script>

    <style type="text/css">
        body,
        p {
            font-family: 'Source Sans Pro';
            font-size: 30px;
            line-height: 15px;
            letter-spacing: 0px;
            font-weight: bold;
        }

        #container {
            width: 100%;
            height: 100%;
            margin: 0px;
            padding: 0px;
        }

        #contenido {
            width: 50%;
            min-width: 300px;
            margin-left: 60px;
            letter-spacing: -1px;
            padding: 20px 0 0px 0;
        }

        #texto {
            padding: 20px;
            margin-top: 30px;
        }

        #texto p {
            margin: 0px;
            padding-bottom: 20px;
        }

        #nombre {
            font-family: 'Special Elite';
            font-size: 30px;
            padding-top: 15px;
            border: 0px;
        }

        #imagen {
            vertical-align: text-top;
            width: 50%;
            float: right;
        }

        input:focus {
            outline: 0 !important;
        }
    </style>

</head>

<body>
    <div id="container">
        <div id="contenido">
            <form method="POST" id="formulario">
                <div id="texto">
                    <p>Hola, soy Luis.</p>
                    <p>Bienvenido a mi web personal.</p>
                    <p>Antes de nada,</p>
                    <p>&iquest;podr&iacute;as indicarme tu nombre?</p>
                    <input type="text" id="nombre" autofocus autocomplete="off" />
                </div>
           </form>
        </div>
    </div>
</body>

代码的实时版本：

http://www.luisalmerich.com/

Answer 1

您正在使用没有任何top属性的css position。尝试使用排名absolute或relative

$(document).ready(function () {
            $("#formulario").submit(function (event) {
                $(this).css({
                    top: '-50px',
                    position: 'relative'
                });
            });
        });

如果您不想更改position属性，可以修改margin-top属性，如

$(document).ready(function () {
                $("#formulario").submit(function (event) {
                    $(this).css({
                        marginTop: '-50px'
                    });
                });
            });

最后请注意，当表单提交时，页面会重新加载，因此您很可能只会暂时看到此更改。如果您return false，页面将不会重新加载（尽管这可能不是您想要的）

$(document).ready(function () {
                    $("#formulario").submit(function (event) {
                        $(this).css({
                            marginTop: '-50px'
                        });
                        return false;
                    });
                });

Answer 2

您可以尝试同时添加position: relative;

        $("#formulario").submit(function (event) {
            $(this).css({
                position: "relative",
                top: "-50px"
            });

        });

Answer 3

如果您希望它与.animate（）一起使用，请尝试以下方法：

$(document).ready(function () {
    $("#formulario").submit(function (event) {
        event.preventDefault();
        $(this).css('position', 'relative')
            .animate({top: '-50px'}, 5000, function () {
                // Animation complete.
            })
    });
});

表格不会提交

3 个答案: