jQuery: возможно ли остановить щелчок или отправку формы и возобновить работу после запуска функции?

Question

Я пытаюсь написать простой скрипт, который эффективно затухает содержимое страницы, затем смешивается / затухает в новом слое и, наконец, после того, как эти две анимации затухания завершены, мне нужно убедиться, что исходный триггер активирован.

Так, например, у меня есть кнопка input type=submit, которая отправляет форму и сохраняет некоторые данные в базу данных, а затем возвращает вас к следующему шагу процесса, также есть простой тег <a>, который действует как 'go кнопка "назад".

Вот мой код:

$.fn.pageFade = function( direction , speed , callback ) {
    // make sure the callback is actually a function
    var callback = ( typeof callback == 'function' ? callback : null );
    // closure for the other params
    var direction = ( direction ? direction : 'out' ),
        speed     = ( speed ? speed : 400 );
    // new elements to be added to dom and manipulated
    var content =   $('#main'),
        shade   =   $("<div />", {
                        'id' : 'shade',
                        'css': {
                            'position':'absolute',
                            'top':0,
                            'left':0,
                            'width':'100%',
                            'height':'100%',
                            'background-color':'#fff',
                            'z-index':'-1'
                        }
                    });

    // do stuff
    if ( direction == 'out' ) { 

        // fade out of content then next page
        $(shade)
            .appendTo('body').hide();
        content.fadeOut( speed );
        $(shade).fadeIn( speed*4 , callback );

    } else {

        // on next page fade in the content (would be fired on load)
        content.hide();
        $(shade)
            .appendTo('body');
        $(shade).fadeOut( speed*4 );
        content.fadeIn( speed , callback );

    }

};

// attach to the triggers (go back & next buttons)
$("[name='submitNext'],.go-back").click(function(e) {
    // stop the default click so that the animation can fire instead of changing the page
    e.preventDefault();
    // start the fade out action, in the callback fire the original click
    $(this).pageFade('out', 400, function() {
        $(this).trigger('click');
    });
});

Вышесказанное (само собой разумеется) прерывается из-за рекурсии события click.

Что мне нужно знать, так это как эффективно «возобновить» оригинал, даже если я остановился, пока не сработали мои анимации.

Любые идеи были бы великолепны.

Answer 1

Вместо того, чтобы пытаться возобновить, попробуйте определить, что вы хотите, чтобы произошло после вашего затухания.

Таким образом, ваш нижний код будет выглядеть примерно так:

// attach to the triggers (go back & next buttons)
$("[name='submitNext'],.go-back").click(function(e) {
    // stop the default click so that the animation can fire instead of changing the page
    e.preventDefault();
    // start the fade out action, in the callback fire the original click
    $(this).pageFade('out', 400, function() {
        $(this).closest("form").submit();//assuming this is what you want done after the fade.
    });
});

Надеюсь, что это поможет!

Answer 2

Проблема в том, что ваш "триггерный" клик снова вызывает ту же функцию.

Вы можете вызвать «отправить» на элемент формы $("#myform").submit();