これが私の問題です。ユーザーが「検証」ボタンをクリックすると、「問題のある」要素の配列を返す 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();
}