Question

成功进行ajax调用后，我会显示一个告诉成功状态的元素。我需要暂时显示它并在说10秒后隐藏它。

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

时隐藏

下面的代码似乎不起作用，因为元素在显示之后不会隐藏，只需添加＆＃39; show＆＃39;类

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

        }
    });
}

Answer 2

简单的说法：

$(obj).show().delay(10000).hide();

Answer 3

找到你的元素，显示它，添加10秒的延迟，最后隐藏它。你可以链接所有这些效果/事件：

$('.response').show().delay(10000).hide();

Answer 4

您可以使用回调。

$(".response").fadeIn("slow","swing", function()
    {
        (".response").delay(10000).fadeOut("slow");
    });

http://www.w3schools.com/jquery/jquery_callback.asp

Answer 5

您的代码应该像我在评论中提到的那样工作。我已将它们放在codepen中，只需最少的更改

HTML：

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<p class="response hide" >Successfully Updated!</p>
<!--- response msg is hidden by default --->

的CSS：

.hide{
  display: none;
}

JS：

var millisecondsToWait = 1000;

$(document).ready(function(){
    //$('.response').addClass('show').removeClass('hide');


    $('.response').show();
    setTimeout(function () {
      $('.response').fadeOut('fast');
    }, millisecondsToWait);
});

codepen示例：http://codepen.io/anon/pen/bNrGwW

Answer 6

试试这个： -

$('.response').show().delay(10000).fadeOut('slow');

显示几秒后隐藏html元素

6 个答案: