title: jQuery Animation on multiple items
body: <p>On the page i have multiple thumbs images, each has it's own id, generated by php.</p>
  
  <p>I need to do the jQuery animation for each element.</p>
  
  <p>I'm stuck here, how i can detect witch <code>thumb_id-??</code> the user is hovering, and animate it?</p>
  
  <p>I know i can do two simple js function for onmouseover/out and pass the id.. but there is another method of doing it with jQuery?</p>
  
  <pre><code>&lt;script&gt;
  $(document).ready(function(){
      $('#thumb_id- ??? ').mouseover(function(){
                  div = $('div.thumb-img-hover');
                  div.animate({opacity: '1'}, 150);
      }).mouseout(function(){
                  div.animate({opacity: '0'}, 150);
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <hr>
  
  <pre><code>foreach($arr as $val){
      echo '  
      &lt;a class="group1" text="TESTING" title="" href="'.$baseurl.'uploads/'.$val["filename"].'"&gt;
      &lt;div class="thumb-img-container right"&gt;
      &lt;div class="thumb-img" style="position:relative;background:url(\''.$baseurl.'uploads/thumbs/'.$val["filename"].'\') no-repeat center center;background-size: cover;"&gt;
      &lt;div id="thumb_id-'.$val["id"].'" class="thumb-img-hover"&gt;&lt;a href="'.$baseurl.'index.php?action=image&amp;id='.$val["id"].'"&gt;test&lt;/a&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;/a&gt;
      ';
  }
  </code></pre>