jQuery: Is it possible to stop a click or form submit and resume after firing a function?

I'm trying to write a simple script that effectively fades out the page content, then blends/fades in a new layer and then finally after those two fade animation have completed I need to make sure that the original trigger is activated.

So for example I have a input type=submit button that submits a form and saves some stuff to the database then returns you to the next step in the process, there is also a simple <a> tag that acts as the 'go back' button.

Here is my code:

$.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 ( directio开发者_JAVA百科n == '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');
    });
});

The above (needless to say really) breaks because of recursion on the click event.

What I need to know is how to effectively "resume" the original even I stopped until after my animations have fired.

Any ideas would be great.

---

Instead of trying to resume, try defining what you want to have happen after your fade.

So your bottom code would be more like maybe:

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

Hope that helps!

---

The problem is, that your "trigger" click is calling the same function again.

you could call "submit" on the form element. $("#myform").submit();