Запустите анимацию перед отправкой формы (и убедитесь, что она завершена)

Question

Итак, у меня есть небольшая форма (#edit_form) с элементами из базы данных.Проверенным элементам присваивается класс .selected, и когда пользователь отправляет форму, я хочу, чтобы они сдвинулись вверх, прежде чем форма будет фактически отправлена ​​и страница перезагрузится.Я пробовал это:

$("#edit_form").submit(function(){
    $('.selected').slideUp(800,function(){
        $("#edit_form").submit();
    });
});

Проблема в том, что форма просто отправляет, и не ждет, пока анимация не будет завершена.Я также попробовал это:

$("#edit_form").submit(function(e){
    e.preventDefault();
    $('.selected').slideUp(800,function(){
        $("#edit_form").submit();
    });
});

Это вызывает анимацию, но форма никогда не отправляется.Вот еще один, который я попробовал (кнопка отправки имеет идентификатор #formsubmit):

$("#formsubmit").click(function(e){
    e.preventDefault();
    $('.selected').slideUp(800,function(){
        $("#edit_form").submit();
    });
});

Я пробовал это с и без preventDefault(), и они оба делают то же самое, как будто япытаясь перехватить форму отправить действие.У кого-нибудь есть другие идеи?

Answer 1

Ваш второй пример близок, однако JavaScript входит в бесконечный цикл. Вы это видите?

Когда событие отправки обрабатывается, вы звоните preventDefault. Таким образом, когда вы отправляете его программно ($("#edit_form").submit();), событие submit просто вызывается снова, и вы предотвращаете его снова и т. Д.

Чтобы решить эту проблему, отмените событие отправки перед программной отправкой формы:

$("#edit_form").unbind("submit").submit();

Полный код:

$("#edit_form").submit(function(e)
{
    e.preventDefault();
    $('.selected').slideUp(800,function()
    {
        $("#edit_form").unbind("submit").submit();
    });
});

Редактировать: Я был не прав. Фиксированный код.