Need performance help in jQuery animation

Question

Trying to do this:
function getRec receives a string say (1,3,4). It then splits it into an array. It then calls addRecBox for each element of the array.

addRecBox appends some specs to each box. Each one should be fading in. And appear on after the other. 'Add' box is appended after that.

Problem 1: Animation is not smooth.
Problem 2: the output seems to be jumbled up.

Here is my code.

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);    
    }
}); 

}

Any help is most appreciated.

http://jsfiddle.net/dv2utex6/6/

Answer 1

Ok, here is how I manage to do it. Fiddle.

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);
            }
        });
    }
}); 
}

Answer 2

DEMO

Ok finally, after so much experiments, I found so many issues in your code and I've listed some of them below:

• specification spelling was incorrect in data[0] and data[1] and data[2] and in addSpecs calling area and inside function too. Check that in your fiddle. So it was giving error when it reached .specification for 1st data

• You were calling addspecs in addRecoBox before checking for i value less than x and that was causing issue while appending last data

• In addSpecs you were appending to mismatched element i.e. $('#'+recArray[i]).append($specDiv); whereas you used to pass the value of Array and not index in addSpecs which is being called from addRecoBox and that made your wholedata` to append incorrectly:

Check your fiddle on the above things and you will find the mistakes mentioned and below is the fix for your issues:

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);    
        }
    }); 
}

Answer 3

I modified

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

to this:

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

does that look better?

fiddle: http://jsfiddle.net/ahvonenj/dv2utex6/9/