0

这是我的问题：当用户单击“验证”按钮时，我发送了一个 AJAX 请求，该请求返回一个“有问题”元素的数组。从该数组中，我计算要突出显示的元素的 id，然后“闪烁”它们。

这很好，它有效，但它们都一起闪烁。

我想一个接一个地闪烁它们，以便它更长并且看起来更好（=不具有侵略性）。我花了一些时间尝试使用queue()函数（我想这是要走的路），但没有设法让它工作。

知道怎么做吗？

/* this is the function to retrieve bg color (= not the actual subject) */
jQuery.fn.getBg = function() {
    return $(this).parents().filter(function() {
        var color = $(this).css('background-color');
        return color != 'transparent' && color != 'rgba(0, 0, 0, 0)';
    }).eq(0).css('background-color');
};

/* this is my flash function (= not the actual subject) */
function flash(id, font_color, bg_color, nb) {
    var bc=$(id).getBg();
    var cl=$(id).css('color');
    var mx=parseInt(nb);
    if (mx<=0) {
        mx=1;
    }
    for (var i=0; i<mx; i++) {
        $(id).animate({
            backgroundColor: bg_color,
            color: font_color
        }, 200)
        .animate({
            backgroundColor: bc,
            color: cl
        });
    };
}

function localOnAjaxError(dataMessage)
{
  var msg='';
  $('#wait').hide('slow');
  /* show the form again and highlight errors */
  $('#s-inscrire-form').show('slow', function() {
    if (msg!='') {
      $('#erreur').fadeIn('slow');
      flash('#erreur', "#f9e4c9", "#aa0000", 3);
    }
    if (dataMessage instanceof Array) {
      for (key in dataMessage) {
        var m=dataMessage[key];
        if(m.indexOf('#error')==0) {
          /* show the id... */
          $(m).fadeIn('slow', function() {
            /* ...then flash the corresponding label */
            flash('#label-'+this.id.substr(7), "#ffffff", "#aa0000", 3);
          });
        }
      }
    }
  });
  seConnecterAssigneClicksConnexion();
}
4

3 回答 3

0

flash您将需要从您的函数中返回动画队列。然后，您不需要在 for 循环中一起启动所有闪存（顺便说一句：for-in-loops 不适合数组），您需要将它们递归地推送到该队列中。你试过.queue()什么？

于 2012-05-24T16:04:26.260 回答
0

queue使用 jQuery 的方法是正确的。这是一个获取所有 div 并按顺序更改其颜色的示例。

var theQueue = $({});

$('div').each(function(index, div) {
    theQueue.queue('flash', function(next) {    
        $(div).animate({
            backgroundColor: 'red'
        }, 500, function() {
            next();
        });    
    });
});

theQueue.dequeue('flash');

现场示例- http://jsfiddle.net/z7xRe/

还有一个关于 Stack Overflow 的问题，在这里更详细地介绍了这个用例 - jQuery 中的队列是什么？. 请参阅@gnarf 的回复。

于 2012-05-24T16:11:20.983 回答
0

这是工作解决方案：

dataMessage = new Array("#erreur-nomprenom", "#erreur-adresse1", "#erreur-cp", "#erreur-ville", "#erreur-tel");
var theQueue = $({});
for (key in dataMessage) {
    var m = dataMessage[key];
    if (m.indexOf('#erreur') == 0) {
        var toFlash = (function(m) {
            return function(next) {
                $(m).fadeIn('slow', function() {
                    flash('#label-' + this.id.substr(7), "#ffffff", "#aa0000", 3);
                    next();
                });
            }
        })(m);
        theQueue.queue('flash', toFlash);
    }
}
theQueue.dequeue('flash');
于 2012-06-04T19:03:36.130 回答