如何在同一元素上做平行動畫

Question

這裏是jsfiddle中的代碼！

這是the actual site！

問題1：當我點擊輸入時調用函數時，它們並不是一個接一個地執行，它有時會起作用，如果它並行並且一次執行所有操作！但這不是真正的問題，我喜歡一些建議！

問題實際：當我打電話進入時，我切換所有的分類，然後在div.third上做一個並行動畫（使背景呈綠色或紅色，然後淡出），問題是，當我做得足夠快時，調整div.fourth直到完成背景動畫。所以我認爲這個解決方案是一個並行動畫女巫不會與主動畫switchClases（）交互。

// Do everytime we press a key 
$(document).keydown(function(){ 
    // By presing 'Enter' we call exec. 
    $("#wraper input.third").bind('keydown',function(e){ 
     // Make key variable by phrasing the event 
     var keyPresed = (e.keyCode ? e.keyCode : e.which); 
     // Allow only backspace, delete and enter 
     if (keyPresed == 46 || keyPresed == 8 || keyPresed == 13){ 
      // If this is true animation is still in progress 
      if (transAct) { 
       // OBLIVION 
       } 
      // Or else start another animation and execution 
      else{ 
      // If 'enter' is pressed then and new row and execute everything 
      if((keyPresed == 13) && $("input.third").val()){ 
        //Set the new uniqueId 
        uniqueId++; 
        $("div.second").addClass("class"+uniqueId); 
        //Get result number because it will not be his name anymore 
        result = $("input.third").val(); 
        //Switch clases 
        SwitchClases(_this); 
        transAct = true; 
        // Her we actualy insert the new line 
        $("<div class='first'>9 x 8 = <input class='first' type='text' disabled='true' maxlength='2'/></div>").css("opacity", "0").hide().prependTo(_this).slideDown().animate({opacity: 0.1},function(){ 
          transAct = false; 
         }) 
        $("div.third").append(" "+result) // Write down inputed result 
        $("input.third").fadeOut().remove() // Drop input box into black hole 
        $("div.fifth").fadeOut().remove(); // Do same thing to last division 

       // Check if answer was correct! 
       // Here are two examples with whom you can play as much as you like 
       //$(".leftSide div.class"+(uniqueId-1)).stop().animate({backgroundColor: '#00DD00'},100).animate({backgroundColor: 'white'},900); 
       // $(".leftSide").stop().animate({backgroundColor: '#DD0000'},100).animate({backgroundColor: 'white'},900); 

       //Now set focus to next input area , so we can continue and be lazy by not clicking on new input box! 
       $('.newEleCont input.second').focus(); 
       } 
      } 
     } 
     // Restrict inputing any other character besides a number 
     else { 
      // Ensure that it is a number and stop the keypress 
      if ((keyPresed < 48 || keyPresed > 57) && (keyPresed < 96 || keyPresed > 105)) { 
       e.preventDefault(); 
      } 
     } 
    }); 
}); 

1）我怎麼能找到雙動畫解決方案：在所有的魔術發生

碼？
2）我怎麼能改善這個代碼（即，使用較少的jQuery）

編輯：正如你可以看到我增加了額外的UNIQUEID類於每一位新div.third。而我想要做的只是在給定uniqueID上投射backgroundColor動畫，但不能與基本的第三，第四，第五類動畫互動，就像他們做了自己獨立的事情一樣！

Answer 1

jQuery中的並行動畫：您可以通過將屬性對象傳遞給動畫函數來執行並​​行動畫。例如：

var animateProperties = { 

    top:50px, 
    left:100px, 
    width:300px, 

} 

object.animate(animateProperties); 

，您可以使用停止功能停止正在進行的動畫。我已經修改了你的代碼，下面給出了調用動畫函數的代碼。

var style = { 

    "opacity": opacity, 
    "font-size": fontSize + "px" 

} 


if(animate){ 

     if(index == config.activeIndex + 1){ 
     style.backgroundColor = '#00EE00'; 
     $(row).stop(true, true).animate(style, 100) 
       .animate({backgroundColor: 'white'}, 1200); 
     }else{ 
     $(row).stop(true, true).animate(style, 100); 
     } 

}else{ 
    $(row).css(style); 
} 

你可以找到的代碼在這裏http://jsfiddle.net/diode/rBqVE/6/

最終版本我已經使用配置對象所做的這個配置。你可以在代碼中找到它，但爲了得到最好的結果，你也必須修改css。

Answer 2

參見功能出隊 http://api.jquery.com/jQuery.dequeue/

jQuery的添加每個有生呼叫到一個隊列。使用出列您可以調用下一個動畫調用隊列。

這裏dequeue demo你可以看到一個簡單的演示。 另請參閱jQuery效果http://jqueryui.com/demos/effect/。它不是爲了這個目的，但可能是有用的。