javascript - JQuery消息应该delay()和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;
});