Question

我在使用jQuery时遇到了一些麻烦。

我有这段代码：

<div id="divSavingInformation" style="position:absolute;">All changes saved.</div>
$(function(){

        $(document).on("blur","div[contenteditable=true]",function() {

            var wait = Math.floor(Math.random() * 3000) + 500;

            $('#divSavingInformation').fadeOut(500, function() {
                $('#divSavingInformation').html("<i class='fa fa-spinner fa-pulse fa-lg fa-fw'></i> Saving data...").fadeIn(500).delay(5000).fadeOut(500).html("All data saved.").fadeIn(500);
            });

            var field_userid = $(this).attr("id") ;
            var value = $(this).text() ;
            $.post('pages/ajax/updateRadio.php' , field_userid + "=" + value, function(data){

            });
        });
    });

代码是通过一个可信的div触发的。这是一个jsfiddle https://jsfiddle.net/oyv27cce/3/

哪种方式不能按我需要的方式工作。基本上，我需要它做的是：

淡出名为＆＃34; divSavingInformation＆＃34;
将div的内容更改为<i class='fa fa-spinner fa-pulse fa-lg fa-fw'></i> Saving data...
淡入div以显示上面的更改
在显示div时等待几秒钟，这将是一个变量，现在我用5秒钟。
淡出div退出
将div的内容更改为All data saved
淡入并继续展示

目前，代码的作用是淡出并重新进入，但内容似乎没有变化。我认为我使用的延迟是错误的，也许它会在内容消失之前将内容更改回All data saved，使其看起来像旋转器永远不会显示。

我不知道我在做什么，并且可以真正使用一些帮助。

Answer 1

你必须使用setTimeout（）。

var element = $('div');

element.fadeIn();

setTimeout(function(){
  element.fadeOut();
}, 2000);

这将在2000ms或2秒后淡化元素和淡出。

您可以使用此功能：

$。AJAX（{ url：“/ post / url.php”，类型：“POST”，数据：参数，成功：successFunction，错误：errorFunction }）;

然后通过使用函数successFunction和errorFunction，您可以处理这些情况。您可以扩展内联编辑，以便在失败时，您的用户也知道。 XEditable是一个可以做到这一点的库。

Answer 2

问题是fadeIn()和fadeOut()是异步的，它们排队等待在当前运行的函数完成后执行效果。你需要推迟最后的效果，直到函数完成并摆脱delay()调用，因为这将由setTimout()处理：

$('#divSavingInformation').hide();
$('#divSavingInformation').html("<i class='fa fa-spinner fa-pulse fa-lg fa-fw'></i> Saving data...</div>").fadeIn(500).fadeOut(5000);;

// Defer the following code until after this function has completed.
setTimeout(function(){

  $('#divSavingInformation').html('All data saved.').fadeIn(500);
}, 5000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divSavingInformation"></div>

jquery淡入和淡出保存数据块

2 个答案: