Jquery淡入和淡出保存数据块

jquery fade in and out saving data chunk

本文关键字：数据 保存 淡出 淡入 Jquery      更新时间：2023-09-26

我在使用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/

不像我想要的那样工作。基本上，我需要它做的是:

  1. 淡出div "divSavingInformation"
  2. 将div内容更改为<i class='fa fa-spinner fa-pulse fa-lg fa-fw'></i> Saving data...
  3. 在div中淡入显示上面的变化
  4. 在显示div时等待几秒钟，这将是一个变量，现在我使用5秒。
  6. 将div内容更改为All data saved
  7. 淡出并保持显示

目前，代码所做的是淡出和回归，但内容似乎没有改变。我认为我使用的延迟是错误的，也许它是在它淡出之前将内容更改回All data saved，使其看起来像旋转器从未显示。

我不知道我在做什么，我真的需要一些帮助。

问题是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>

您必须使用setTimeout()。

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

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

你可以这样写:

. ajax({美元url:"/post/url.php",类型:"文章",数据:参数,成功:successFunction,错误:errorFunction});

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

相关文章：