jQuery消息應該延遲（）和fadeOut（）

Question

我將以下腳本與聯系表單一起使用，但是我需要進行一些小的修改，並且無法弄清楚如何實現此目的。
目前#note消息會滑動打開並保持打開狀態。
首先，我將.slideUp更改為fadeIn ，然后幾秒鍾后需要關閉該消息，所以我想我應該添加.delay(2000).fadeOut()但我不知道如何實施此更改。

謝謝

jQuery的

var close_note = $("#note");
close_note.click(function () {
    jQuery("#note").slideUp(1000, function () {
        jQuery(this).hide();
    });
});

$("#ajax-contact-form").submit(function() {
    $('#load').append('<center><img src="images/ajax-loader.gif" alt="Currently Loading" id="loading" /></center>');
    var fem = $(this).serialize(),
        note = $('#note');
    $.ajax({
        type: "POST",
        url: "contact.php",
        data: fem,
        success: function(msg) {
            if ( note.height() ) {          
                note.slideUp(1000, function() {
                    $(this).hide();
                });
            } 
            else note.hide();
            $('#loading').fadeOut(300, function() {
                $(this).remove();
                if(msg === 'OK') {   $("#ajax-contact-    form").find('input, textarea').val(""); }     
                // Message Sent? Show the 'Thank You' message and     hide the form
                result = (msg === 'OK') ? '<div     class="success">Your message has been sent. Thank you!</div>' : msg;
                var i = setInterval(function() {
                    if ( !note.is(':visible') ) {
                        note.html(result).slideDown(1000);
                        clearInterval(i);
                    }
                }, 40);    
            }); // end loading image fadeOut
        }
    });

    return false;
});

Answer 1

您可以使用類似的方法來顯示#note幾秒鍾，然后淡出它

$('#note').hide().html(msg).fadeIn(1000, function() {
    $(this).delay(3000).fadeOut(1000);
});

所以代碼看起來像

$("#ajax-contact-form").on('submit', function() {
    $('#load').append('<center><img src="images/ajax-loader.gif" alt="Currently Loading" id="loading" /></center>');

    $.ajax({
        type: "POST",
        url: "contact.php",
        data: $(this).serialize()
    }).done(function(msg) {
        $('#loading').fadeOut(300, function() {
            $(this).remove();
            if(msg === 'OK') {
                $("#ajax-contact-form").find('input, textarea').val("");
                msg = '<div class="success">Your message has been sent. Thank you!</div>';
            }
            $('#note').hide().html(msg).fadeIn(1000, function() {
                $(this).delay(3000).fadeOut(1000);
            });
        });
    });

    return false;
});