Form doesn't move up on submit

Question

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()), bu

Answer 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'
                        });
                        return false;
                    });
                });

Answer 2

Can you try adding position: relative; also

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

        });

Answer 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.
            })
    });
});