title: Basic understanding of loops in jQuery
body: <p>I'm having a hard time understanding how to loop jQuery, I think my problem is I think in a PHP manner.</p>
  
  <p>Lets say I've got this very simple example.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div style="background:#98bf21;height:100px;width:100px;position:relative"&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>$(document).ready(function(){
  $("div").animate({height:300},"slow");
  $("div").animate({width:300},"slow");
  $("div").animate({height:100},"slow");
  $("div").animate({width:100},"slow");
  });
  </code></pre>
  
  <p>Se it <a href="http://www.jsfiddle.net/FjQJV/" rel="nofollow">here</a></p>
  
  <p>If i understood correctly, I would have to use <a href="http://api.jquery.com/each/" rel="nofollow">.each()</a> *</p>
  
  <p>But I cant figure out how to make it work.</p>
  
  <p><strong>NOTE:</strong> This is only an example, I'm interested more in the approach you would take, rather the actual looping.</p>
  
  <p>Thanks in advance, please ask if any clarification is needed!</p>
  
  <p>*I'm not necessarily looking for an answer with .each(), any approach you take is fine for the learning purposes.</p>