如何以“旋转”方式突出显示某些元素

How to highlight some elements in a "rotating" fashion?

本文关键字：显示 元素 方式突 旋转      更新时间：2023-09-26

这是我的问题：当用户单击"验证"按钮时，我发送一个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();
}

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

使用 jQuery 的 queue 方法是正确的。 下面是一个示例，它采用所有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的回应。

这是有效的解决方案：

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');
相关文章：