Form Doesn't Move Up On Submit

I'm trying to move the form up a few pixels and this doesn't work. I don't know why. The function is being called when I submit (I have tested it with an alert()), but the css part

Solution 1:

You are using css top without any position properties. Try using position absolute or relative

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

If you do not wish to change the position property, you can modify the margin-top property like

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

Finally, note that when a form submits, the page reloads so you will most likely only see this change temporarily. If you return false, the page will not reload(although this may not be what you want)

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

Solution 2:

Can you try adding position: relative; also

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

        });

Solution 3:

If you want it to work with .animate() try this:

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