在 ajax 请求时闪烁和淡入淡出元素

Question

只要调用后端服务，我就试图淡化 DOM 元素(SVG 节点(。我的第一个幼稚实现看起来像那样(但它不起作用(：

$( function() {
request = true
$.ajax({
url: "/mybackend"
}).done(function() {
request = false
$( "#myelement" ).attr('fill', '#00FF00');
});
while (request) {
$("#myelement").fadeTo('slow', 0.2).fadeTo('slow', 1.0);
}
} );

感谢您的帮助！

Answer 1

为什么不这样做：

$( function() {
// start the fade here
$("#myelement").fadeTo('slow', 0.2).fadeTo('slow', 1.0);
request = true
$.ajax({
url: "/mybackend"
}).done(function() {
request = false
$( "#myelement" ).attr('fill', '#00FF00');
});
} );

Answer 2

您可以尝试像这样为淡入淡出效果制作和递归函数：

function makeFade() {
if($("#myelement").getAttribute("fill") != '#00FF00')
{
$("#myelement").fadeTo('slow', 0.2).fadeTo('slow', 1.0);
setInterval(makeFade(), 2000);
}
}

将该函数的调用添加到您的 ajax 调用中，如下所示：

$.ajax({
url: "/mybackend",
beforeSend: makeFade()
}).done(function() {                
$( "#myelement" ).attr('fill', '#00FF00');
});

我认为这对你有用。 如果确实如此，请告诉我。 问候。

Answer 3

我最终得到了fadeTo的第三个参数，一个完整的函数：

$( function() {
var requestReturned = false;
var fadeAndBlink = function() {
$("#myelement").fadeTo('slow', 0.2).fadeTo('slow', 1.0, function() {
if (requestReturned == false) {
fadeAndBlink();
} else {
$( "#myelement" ).attr('fill', '#00FF00');
}
});
};
$.ajax({
url: "/mybackend",
beforeSend: fadeAndBlink
}).done(function() {
requestReturned = true
});
} );