jquery loop callback problem
I want to fade out all the input fields in the form and then replace them with a label.
I am using a callback function so that the label fades in only after the form inputs fade out. If I use the code below the all the inputs fade out but only last label fades in therefore only the 'email' callback works. If I write them all out longhand without a loop the it works perfectly.
an example input name id = #familyname
an example replacement label = #familynameC
Can anybody explain why the loop doesn't work?
var inputs = new Array('title', 'firstname','familyname','address1', 'address2', 'city','country',
'postcode','telephone', 'mobile', 'email');
for (var field in inputs) {
$('#'+ inputs[field]).fadeOut(1000,function() {
$('#'+ inputs[field]+'C').html($('#'+ inputs[field]).val()).show(1000);
});
}