jQuery：是否可以在触发函数后停止单击或表单提交并恢复？

Question

我正在尝试编写一个简单的脚本，该脚本可以有效地淡出页面内容，然后在新图层中混合/淡出，最后在这两个淡入淡出动画完成后，我需要确保激活原始触发器。

例如，我有一个 input type=submit 按钮，用于提交表单并将一些内容保存到数据库，然后返回到流程的下一步，还有一个简单的 < a> 标签充当“返回”按钮。

这是我的代码：

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

上面的代码（不用说真的）由于点击事件的递归而中断。

我需要知道的是如何有效地“恢复”原始内容，即使我停下来直到动画触发后。

任何想法都会很棒。

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();