Javascript背景颜色过渡和HTTP响应重置

Question

我正在使用 Firefox 的 ajax 向服务器发出 POST 请求。输入只是包含在div内的框中的一些文本条目：

<div id="mydiv">
...stuff...
</div>

如果请求成功，我将调用处理程序来反映该状态。如果请求出错，我会调用不同的处理程序。

$.ajax({
type: 'POST',
data: my_json,
dataType: "json",
url: "/my/url",
success: function(result, status, xhr) {
success_callback();
},
error: function(xhr) {
error_callback();
}
});

成功回调没有多大作用。在错误回调中，我想将背景颜色属性更改为红色以直观地指示错误，然后淡入原始背景色(例如白色)。

进行瞬时换色很容易：

function success_callback() {
var element = document.getElementById('mydiv');
element.style.backgroundColor = "white";
}
function error_callback() {
var element = document.getElementById('mydiv');
element.style.backgroundColor = "red";
}

我尝试使用css动画进行淡入淡出，例如

.CSS

.div.error {
-webkit-animation-duration: 3s;
-webkit-animation-name: error;
animation-duration: 3s;
animation-name: error;
} 
@-webkit-keyframes error {
from {
background-color: red;
}
to {
background-color: white;
}
}

然后在 JavaScript 中添加错误类：

.JS

function error_callback() {
if ($('.div').hasClass('error')) {
$('.div').removeClass('error');
else {
$('.div').addClass('error');
}
}

这在我第一次发送错误的 POST 请求时有效，但在随后的错误 POST 上不起作用，因为我认为removeClass无法正常工作(或者更确切地说，我没有正确使用它)。

在这篇文章 CSS 过渡之后，我也尝试使用 jquery-ui：淡入淡出背景颜色，之后重置，但这似乎对我不起作用。也许这与在按钮单击而不是HTTP响应的上下文中执行动画有关？

我是否朝着正确的方向使用它？如果可能的话，我想保持在标准jQuery的范围内(即远离jQuery UI)。

Answer 1

问题是因为在每个连续的请求中，您切换背景颜色，而不是将其设置为反映上一个请求状态的状态。

要解决此问题，您可以改为在元素上设置error类，然后在任意时间(例如 10 秒)后使用超时删除该类：

function error_callback() {
var $div = $('.div').addClass('error');
setTimeout(function() {
$div.removeClass('error');
}, 10000);
}

请注意，正如下面的注释中@Taplar提到的，您还需要记住在初始失败后不久发出第二个成功请求时删除error类。