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