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

JQuery消息应该是delay（）和fadeOut（）

1 个答案: