需要jQuery动画中的性能帮助吗

正在尝试这样做：
函数getRec接收一个字符串，比如（1,3,4）。然后将其拆分为一个数组。然后为数组的每个元素调用addRecBox

addRecBox为每个框添加一些规格。每一个都应该逐渐消失。然后一个接一个地出现。”“添加”框附加在后面。

问题1：动画不平滑。
问题2：输出似乎混乱。

这是我的密码

function getRec(arrayS)
{  
recArray = arrayS.split(',');
addRecoBox(0,recArray.length);
}

function addRecoBox(i,x){
var $div = $("<div>", {id: recArray[i], class: "recH"});
$("#recHolder").append($div);
addSpecs(recArray[i],0,data[recArray[i]].specfication.length);
$('#'+recArray[i]).append('<div>Add</div>');
    if(i<x){
        i++;
        addRecoBox(i,x);
    }
}

function addSpecs(i,j,x){ 
var $specDiv = $("<div>", {id: "spec"+i+"_"+j, class: "specHolder"});
$specDiv.html(data[i].specfication[j]);
$('#'+recArray[i]).append($specDiv); 
$specDiv.fadeIn( 800, function() {
if (j<x){
    j++;
    addSpecs(i,j,x);    
    }
}); 

函数getRec（数组） { recArray=arrayS.split（'，'）； addRecoBox（0，重新排列长度）； } 函数addRecoBox（i，x）{ var$div=$（“”，{id:recArray[i]，类：“recH”}）； 美元（“#收款人”）。追加（$div）； 添加规格（重新排列[i]，0，数据[重新排列[i]].规格.长度）； $（'#'+recArray[i]）。追加（'Add'）； 如果（ii）修改

$specDiv.html(data[i].specfication[j]);

为此：

$specDiv.html(data[i].specfication[j]).hide();

那看起来好些吗

小提琴：

好的，最后，经过这么多的实验，我在您的代码中发现了这么多问题，我在下面列出了其中的一些问题：

• specification

  在数据[0]和数据[1]以及数据[2]中以及在调用区域和内部函数中，拼写不正确。请在 小提琴。所以当它达到

  规格时，它给出了
  错误
  第一个
  数据
  

• 在检查

  i

  值是否小于

  x

  之前，您在

  addRecoBox

  中调用了

  addspecs

  ，这导致了在最后一次追加时出现问题

  数据

• 在

  addSpecs

  中，您将追加到不匹配的元素，即

  $（'#'+recArray[i]）。追加（$specDiv）；

  ，而您过去是通过 正在调用的

  addSpecs

  中的数组和非

  索引的值
  从
  addRecoBox，这使得您的整个
  data`都要追加
  错误地：
  

检查上述事项的，您会发现上面提到的错误，以下是解决问题的方法：

var data=[];
data[0]={};
data[0].specification = ['a','b','c']; //spelling mistake here
data[1]={};
data[1].specification = ['p','q','r','s']; //spelling mistake here
data[2]={};
data[2].specification = ['x','y','z']; //spelling mistake here
data[3]={};
data[3].specification = ['1','2'];
data[4]={};
data[4].specification = ['fu','ba','r'];

var arrayS = '1,3,4';
var recArray = [];
getRec(arrayS);

function getRec(arrayS)
{  
    recArray = arrayS.split(',');
    addRecoBox(0,recArray.length);
}

function addRecoBox(i,x){
    var $div = $("<div>", {id: recArray[i], class: "recH"});
    $("#recHolder").append($div);
    $('#'+recArray[i]).append('<div>Add</div>');
        if(i<x){
            addSpecs(recArray[i],0,data[recArray[i]].specification.length);
            //spelling mistake in the above 'specification' and moved it inside if statement 
            i++;
            addRecoBox(i,x);
        }
}

function addSpecs(i,j,x){ 
    var $specDiv = $("<div>", {id: "spec"+i+"_"+j, class: "specHolder"});
    $specDiv.html(data[i].specification[j]).hide();
    $('#'+i).append($specDiv);  //You used to assign as recArray[i] here
    console.log($('#'+recArray[i]))
    $specDiv.fadeIn( 800, function() {
    if (j<x){
        j++;
        addSpecs(i,j,x);    
        }
    }); 
}

var数据=[]；
数据[0]={}；
数据[0]。规范=['a'，'b'，'c']；//此处有拼写错误
数据[1]={}；
数据[1]。规范=['p'，'q'，'r'，'s']；//此处拼写错误
数据[2]={}；
数据[2]。规范=['x'，'y'，'z']；//此处拼写错误
数据[3]={}；
数据[3]。规范=['1'，'2']；
数据[4]={}；
数据[4]。规范=['fu'，'ba'，'r']；
变量数组='1,3,4'；
var-recArray=[]；
getRec（数组）；
函数getRec（数组）
{  
recArray=arrayS.split（'，'）；
addRecoBox（0，重新排列长度）；
}
函数addRecoBox（i，x）{
var$div=$（“”，{id:recArray[i]，类：“recH”}）；
美元（“#收款人”）。追加（$div）；
$（'#'+recArray[i]）。追加（'Add'）；
如果（i好的话，下面是我如何做到的

var recArray=arrayS.split（'，'）；
addRecoBox（0）；
函数addRecoBox（i）{
var$div=$（“”，{id:recArray[i]，类：“recH”}）；
美元（“#收款人”）。追加（$div）；
addSpecs（i，重新排列[i]，0，数据[recArray[i]].规格.长度）；
}
函数addSpecs（索引，i，j，x）{
var$specDiv=$（“”，{id:“spec”+i+“”+j，类：“specHolder”}）；
$specDiv.html（数据[i].specification[j]）；
$specDiv.css（'display'，'none'）；
$（'#'+i）.append（$specDiv）；
$specDiv.fadeIn（800，函数（）{
j++；
如果（j）尽可能在jsfiddle.netsolley中创建一个关于
fadeIn
动画不工作的演示：添加的元素是完全可见的，如果它是隐藏的（最好是在添加之前），fadeIn应该工作。例如
$（'#'+recArray[i]）。append（$specDiv.hide（））
（）我尝试了不同的方法并到达了这里……但问题是，输出应该是
p
q
r
s
Add
1
2
Add
fu
ba
r
Add不知何故，第一个for循环没有发生。谢谢大师！！！现在，我想，这是因为fadeIn time的问题，但我希望它像第一个p，然后是q，然后是r，s，Add，1，2，Add，fu，ba，r，按顺序添加…它看起来像是Add，Add，Add，p，1，fu等等我得到了这个，但我不知道为什么其他人没有出现。@piyus.我想你没有正确阅读我的观点！！我提到你在提到
数据的规范时有一些拼写错误。
请纠正这一点，并在每个地方保留一个常用词。请看这个。但它的
fadeIn
在这里很麻烦！！很抱歉，但它需要更多的时间来解决，伙计..可能需要重新编写整个内容..最好将它作为单独的问题与小提琴一起发布，以便人们可以帮助你..你也是@piyus..愉快的编码，，
var recArray = arrayS.split(',');

addRecoBox(0);

function addRecoBox(i){
var $div = $("<div>", {id: recArray[i], class: "recH"});
$("#recHolder").append($div);
addSpecs(i,recArray[i],0,data[recArray[i]].specification.length);
}

function addSpecs(index,i,j,x){
var $specDiv = $("<div>", {id: "spec"+i+"_"+j, class: "specHolder"});
$specDiv.html(data[i].specification[j]);
$specDiv.css('display','none');
$('#'+i).append($specDiv); 
$specDiv.fadeIn( 800, function() {
j++;
    if (j<x){
    addSpecs(index,i,j,x);    
    } else {
        $('#'+i).append('<div id="add'+i+'">Add</div>');
        $('#add'+i).css('display','none');
        $('#add'+i).fadeIn(800, function(){
            index++;
            if (index<recArray.length){
            addRecoBox(index);
            }
        });
    }
}); 
}