Question

What I’m trying to here is on hover, the div id magnify has a small animation – the animation is working – however it’s not working more than one div at a time. Looking for a little guidance if I did this incorrect by chance.

jQuery

<script type="text/javascript">
$(document).ready(function(){
$("#project-holder").hover(function(){
    $(".client"+$(this).attr("client")).stop().animate({'margin-left': '130px', 'margin-top': '80px'}, 500);
  }, function(){
    $(".client"+$(this).attr("client")).stop().animate({'margin-left': '-200px'}, 500);
  });
});
</script>

an example of the div is:

<div id="project-holder" client="1">
  <div id="magnify" class="client1">
    <img src="magnify.png">
  </div>
</div>

Answer 1

Change your HTML to use classes instead. Ids are unique and the same id cannot be used more than once:

<div class="project-holder">
  <div class="magnify client">
    <img src="magnify.png">
  </div>
</div>

Now, you can change your JS to this and it should work just fine:

$(document).ready(function(){
  $(".project-holder").hover(function(){
    $(this).find('.client').stop().animate({'margin-left': '130px', 'margin-top': '80px'}, 500);
  }, function(){
    $(this).find('.client').stop().animate({'margin-left': '-200px'}, 500);
  });
});