Cum să evidențiezi anumite elemente într-o manieră "rotativă"?

Iată problema mea: când utilizatorul dă clic pe butonul "validare", trimit o solicitare AJAX care returnează o serie de elemente "problematice". Din matricea respectivă, calculez idul elementelor pe care vreau să le evidențiez, apoi le "leagăn".

Acest lucru este frumos, funcționează, dar acestea luminează împreună .

Vreau să le aprind una după alta, astfel încât să fie mai lungă și să arate mai bine (= nu este agresivă). Am petrecut ceva timp încercând să folosesc funcția queue() (cred că este calea de urmat), dar nu a reușit să funcționeze.

Ai idee cum să faci asta?

/* 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 răspunsuri

Iată soluția de lucru:

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
adăugat

Ați fi corect să utilizați metoda queue a jQuery. Iată un exemplu care ia toate divs și își schimbă culoarea în ordine.

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/

Există o altă întrebare despre Stack Overflow care trece prin acest caz de utilizare în detaliu aici - Ce sunt cozi în jQuery? . Vedeți răspunsul lui @ gnarf.

0
adăugat
Mulțumesc foarte mult, dar, bazându-vă pe eșantionul pe care l-am încercat să-l fac să funcționeze, dar nu, vezi aici: jsfiddle.net/k8yKP/1
adăugat autor Olivier Pons, sursa
Ok, acum mă confrunt cu ultima problemă: când elementele sunt într-o matrice. jsfiddle.net/k8yKP/2 => Îmi pare rău, când vine vorba de JavaScript nu sunt cea mai ascuțită unealtă în magazin.
adăugat autor Olivier Pons, sursa
Iată lucrurile mele cu console.log() adăugat, nu știu cum să o fac să funcționeze: jsfiddle.net/k8yKP/3
adăugat autor Olivier Pons, sursa
Am adăugat soluția de lucru, vă mulțumesc că m-ați pus pe calea cea bună!
adăugat autor Olivier Pons, sursa
Pentru a face animații de culoare, trebuie să includeți și jQuery UI (consultați jqueryui.com/demos/animate ). Am făcut clic pe caseta de selectare pentru a aduce jQuery UI pe fișierul jsFiddle și funcționează conform așteptărilor - jsfiddle.net/78zar .
adăugat autor TJ VanToll, sursa
JavaScript, România - Moldova
JavaScript, România - Moldova
328 participanți

Comunitatea Română JavaScript: github.com/js-ro Pentru confort, opriți notificările. Parteneri: @node_ro, @php_ro, @python_ro, @seo_ro, @RomaniaGroup, @ai_ro, @Grupuri_IT Offtop: @holywars_ro Joburi: @js_jobs_ro Sponsored with ❤️ by ciupacabra.com