Question

Firstly,
Is there a way for me to put variable declarations in a for loop?

E.g. the following:

var origh1 = $('#candidates img:eq(0)').height();  
var origh2 = $('#candidates img:eq(1)').height();
var origh3 = $('#candidates img:eq(2)').height();
var origh4 = $('#candidates img:eq(3)').height();
var thumb1h = $('#candidates img:eq(0)').height()*0.20; 
var thumb2h = $('#candidates img:eq(1)').height()*0.20;
var thumb3h = $('#candidates img:eq(2)').height()*0.20;
var thumb4h = $('#candidates img:eq(3)').height()*0.20;

Then using that those variables, I would like the following in a for loop. Naturally, ‘origh1’ should equal img:eq(i), where i = 0. So I imagine if origh1 were in the loop, it would be something like origh(i+1).

$('#candidates img:eq(0)').fadeIn('normal').delay(300).animate({ height : origh1}, 1200, 'easeInQuad');
$('#candidates img:eq(1)').fadeIn('normal').delay(300).animate({ height : origh2}, 1200, 'easeInQuad');
$('#candidates img:eq(2)').fadeIn('normal').delay(300).animate({ height : origh3}, 1200, 'easeInQuad');
$('#candidates img:eq(3)').fadeIn('normal').delay(300).animate({ height : origh4}, 1200, 'easeInQuad');

Thanks 🙂

Answer 1

For each will do the job:

$('#candidates img').each( function() {
 var origh = $(this).height();
 $(this).fadeIn('normal').delay(300).animate({ height : origh}, 1200, 'easeInQuad'); 
});

To iterate over first 4 change it to:

  $('#candidates img:lt(5)').each( function() {
     var origh = $(this).height();
     $(this).fadeIn('normal').delay(300).animate({ height : origh}, 1200, 'easeInQuad'); 
    });