Animate div when hovering over another div

Question

My issue here is that I have a grid of images and titles for these images which all have the same class.

So the HTML for each image and title in the grid is

<a href="">
<div class="front-menu-image">
<img src="" width="224" height="224"/>
</div>
<div class="front-menu-title">TITLE</div>
</a>

I have tried:

jQuery(document).ready(function($){

    jQuery('.front-menu-image').hover(
        function () {
            jQuery(.front-menu-title).animate({height:'50'});
         },
        function () {
            jQuery(.front-menu-title).animate({height:'25'});
        }
    );  
});

But obviously this caused all in the grid to be animated, when I just want the one in question to be affected.

Answer 1

try this:

$(function(){
  $(".front-menu-image").hover(
    function(){
      $(this).siblings(".front-menu-title").animate({height: '50'})
    }
  );
});

You can use this inside an event handler to refer to the current object.

Answer 2

Try this...

jQuery(document).ready(function($){
    jQuery('.front-menu-image').hover(
        function () {
            jQuery(this).next('.front-menu-title').animate({height:'50'});
         },
        function () {
            jQuery(this).next('.front-menu-title').animate({height:'25'});
        }
    );  
});

It assigns the event handler the same, but inside it it looks for the next element with the title class, relative to what you're hovering over (see the use of this ).

Answer 3

This will animate only that image on which you will hover :-

jQuery(document).ready(function($){

jQuery('.front-menu-image').on('hover', function () {
        jQuery(.front-menu-title).animate({height:'50'});
     },
    function () {
        jQuery(.front-menu-title).animate({height:'25'});
    }
);  
});

For knowing more about the difference between .click() and .on('click') , refere here Difference between .on('click') vs .click()