Jquery淡入和淡出保存数据块
jquery fade in and out saving data chunk
我在使用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/
不像我想要的那样工作。基本上,我需要它做的是:
- 淡出div "divSavingInformation"
- 将div内容更改为
<i class='fa fa-spinner fa-pulse fa-lg fa-fw'></i> Saving data...
- 在div中淡入显示上面的变化
- 在显示div时等待几秒钟,这将是一个变量,现在我使用5秒。
- 将div内容更改为
All data saved
- 淡出并保持显示
目前,代码所做的是淡出和回归,但内容似乎没有改变。我认为我使用的延迟是错误的,也许它是在它淡出之前将内容更改回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就是这样一个库
相关文章:
- 如何使用 Angular JS 将数据保存在数据库中
- 将数据保存到数据库(ajax/php)后,使文本字段变灰/禁用
- 当使用ajax并将html数据保存为对象时,收听浏览器返回按钮.好的或坏的
- 我应该如何将响应数据保存在对象(json)中以获得更好的操作和性能
- 将 JSON 数据保存到服务器上
- 可以'编辑后不会将数据保存在数据库中,但网格显示更改
- Javascript-将谷歌趋势url中的数据保存到PHP数组中
- 如何使用JavaScript将用户生成的数据保存到Firebase中的用户
- 将表数据保存在本地存储中
- 我应该把维基百科的数据保存到我的数据库中吗
- 使用PHP将表格数据保存为CSV格式
- 如何在网站上实现一个按钮,允许用户将生成的数组数据保存为ASCII文件
- imacros JavaScript 将数据保存到文件中,在 Firefox 中给出错误
- 如何将数据保存到本地谷歌表格
- 将表数据保存到 HTML5 LocalStorage
- 如何将 JSON 数据保存到文件
- 将二进制数据保存在浏览器中,而不会在下载时进行 UTF8 编码
- 将输入数据保存到全局变量
- 将数据保存到Syncano Angular应用程序
- 使用角度将结构化数据保存在火库中