title: Attaching an array of effects to elements
body: <p>I'm trying to attach all jquery ui effects to click events on images:</p>
  
  <p><a href="http://jsfiddle.net/jfv7qyff/1/" rel="nofollow">http://jsfiddle.net/jfv7qyff/1/</a></p>
  
  <pre><code>var effectArray = [
      'blind','bounce','clip',
      'drop','explode','fade',
      'fold','highlight',
      'puff','pulsate',
      'scale','shake',
      'slide','transfer'
  ];
  
  for(i=0;i&lt;=effectArray.length-1;i++){
      $('#effects img').eq(i).click(function(event){
          console.log(effectArray);
          console.log(i);        
          console.log(effectArray[i]);
      //    $(this).effect(effectArray[i]);
      });
  }
  </code></pre>
  
  <p>The trouble is,             </p>
  
  <pre><code>console.log(effectArray);
  console.log(i);  
  </code></pre>
  
  <p>both return the right values (the array and the index respectively) but:</p>
  
  <pre><code>console.log(effectArray[i]);
  </code></pre>
  
  <p>just returns undefined. Why is this?</p>