如何以“旋转”的方式突出一些元素?

这是我的问题:当用户点击“验证”按钮时,我发送一个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
0
额外 编辑
意见: 2

3 答案

这是工作解决方案:

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');
0
额外

你会正确使用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');

Live example - http://jsfiddle.net/z7xRe/

关于Stack Overflow还有另一个问题,在这里详细讨论这个用例 - 什么在jQuery队列?。请参阅@ gnarf的回复。

0
额外
非常感谢你,但是,依靠你的样品,我试图让它工作,但它不,看到这里: jsfiddle.net/k8yKP/1
额外 作者 Olivier Pons,
好的,现在我正面临着最后一个问题:何时元素在数组中。 jsfiddle.net/k8yKP/2 =>对不起,说到JavaScript我不是在棚子里最锋利的工具..
额外 作者 Olivier Pons,
这是我的东西与console.log()添加,我不知道如何使它的工作: jsfiddle.net/k8yKP/3
额外 作者 Olivier Pons,
我已经添加了工作解决方案,感谢您让我走上正轨!
额外 作者 Olivier Pons,
要做彩色动画,您还需要包含jQuery UI(请参阅 jqueryui.com/demos/animate )。我点击复选框在jsFiddle中引入jQuery UI,它按预期工作 - jsfiddle.net/78zar
额外 作者 TJ VanToll,

您需要从 flash 函数返回动画队列。然后,你不需要在你的for循环中同时启动所有的闪烁(btw:for-in-loop不适用于数组),你需要在它的队列上递归地推它们。您对 .queue() 进行了哪些尝试?

0
额外