javascript - 显示几秒钟后隐藏 html 元素

Question

成功调用 ajax 后，我将显示一个元素来告知成功状态。我需要暂时显示它并在 10 秒后隐藏它。

我有一个段落元素，其类设置为在加载时隐藏 <p class="response hide" >Successfully Updated!</p>

下面的代码似乎不起作用，因为元素在通过添加“显示”类显示后不会隐藏

function UpdateChangeRequest() {
        $.ajax({
            url: '/Request/UpdateRequest',
            cache: false,
            data: $('form[id="RequestForm"]').serialize(),
            type: 'POST',
            success: function (data) {
                $('.divPartial').html(data);
                $('.response').addClass('show').removeClass('hide');                    
                setTimeout(function () {
                    $('.response').fadeOut('fast');
                }, 1000);
            }
        });
    }

有什么想法吗？谢谢

Answer 1

你应该尝试在你的success回调中做类似下面的事情:

$(function(){
  $('.response').hide();
  
  $('#fake').click(function(){
    
      $('.response').show();
    
      setTimeout(function () { $('.response').fadeOut('fast'); }, 1000);
  });
                   
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="response" >Successfully Updated!</p>

<input type="button" value="click" id="fake"/>

更新

既然你更新了你的帖子，我可以更具体一些:

function UpdateChangeRequest() {
    $.ajax({
        url: '/Request/UpdateRequest',
        cache: false,
        data: $('form[id="RequestForm"]').serialize(),
        type: 'POST',
        success: function (data) {
            $('.divPartial').html(data);

            // Show the success message
            $('.response').show();

            // Define a timeout after which fade out the success message.  
            setTimeout(function () { $('.response').fadeOut('fast'); }, 1000);

        }
    });
}