如何突出「旋轉」時尚的一些元素？

這是我的問題：當用戶點擊「驗證」按鈕，我發送一個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(); 
}

來源

2012-05-24 Olivier Pons

這裏的工作液：

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-04 19:03:36

您需要從flash函數返回動畫隊列。然後，你不需要在你的for循環中同時啓動所有的閃爍（btw：for-in-loop不適用於數組），你需要在它的隊列上遞歸地推它們。你用.queue()試過了什麼？

來源

2012-05-24 16:04:26 Bergi

你會正確使用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/

有通過這種使用情況在這裏更加詳細地走在堆棧溢出另一個問題 - What are queues in jQuery?。請參閱@ gnarf的回覆。

來源

2012-05-24 16:11:20

非常感謝你確實，但是，依靠你的樣品我試圖使它的工作，但它沒有，在這裏看到：HTTP：//的jsfiddle。 net/k8yKP/1/ –

要製作彩色動畫，您還需要包含jQuery UI（請參閱http://jqueryui.com/demos/animate/）。我點擊複選框在jsFiddle中引入了jQuery UI，它按預期工作 - http://jsfiddle.net/78zar/。 –

好吧，現在我正面臨着最後一個問題：當元素在一個數組中。 http://jsfiddle.net/k8yKP/2/ =>對不起，當它涉及到的JavaScript我不是在棚裏最銳利的工具.. –

如何突出「旋轉」時尚的一些元素？

回答

相關問題