Question

我正在尝试使用动画将表单移动几个像素，但它不起作用。

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

这是代码：

<!DOCTYPE>    
<html>

<head>
    <title> Pagina </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="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

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

    });
    </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">
                    <input type="text" id="nombre" autofocus autocomplete="off" />
                </div>
           </form>
        </div>
    </div>
</body>

Answer 1

您要在提交事件中添加动画，但是您从未触发此事件，因为您没有提交按钮。添加html：

<input type="submit" >

提交jQuery动画不起作用

1 个答案: