Question

this is my HTML code :

<div id="staticlinks">
<a class="thumb" href="https://www.facebook.com/" target="_blank"><img src="images/facebook.png"/></a>
<a class="thumb" href="https://www.twitter.com/" target="_blank"><img src="images/twitter.png" /></a>
<a class="thumb" href="https://www.youtube.com/" target="_blank"><img src="images/youtube.png" /></a>
<a class="thumb" href="https://www.youtube.com/" target="_blank"><img src="images/feed.png" /></a>
<a class="thumb" href="https://www.google.com/" target="_blank"><img src="images/google.png" /></a>

</div>

and this is jQuery code :

$(document).ready(
function(){
  $('.thumb').hover(
    function(){
      $(".thumb img", this).animate({height: '80px' , width:'80px'}, 'slow');
    }, function(){
      $(".thumb img", this).animate({height: '60px', width: '60px'}, 'slow');
    }
  );
}
);

the problem is when I remove ‘this’ from $(".thumb img", this) then all the images gets animated. And if I put it here then the animation doesn’t take place. I am not getting the problem.

Answer 1

$(function(){
  $('.thumb').on('mouseenter mouseleave', function( e ){
      var size = e.type=='mouseenter' ? 80 : 60 ;
      $("img", this).animate({height: size , width: size }, 800);
  });
});

Your handler was already pointed to .thumb which are the <a> elements, than you were again pointing to ANY ".thumb img", this where this was not relevant any more.
Now, by doing "img", this you’re actually saying "img", children of THIS hovered which will work as expectd.

Above it’s a nice way to achieve the same.