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.

You can replace `jQuery` with the short selector: `$` . Also, your classes need to be between qoutes. — timo, Sep 01 '14 at 08:49

score 1 · Answer 1 · answered Sep 01 '14 at 08:50

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.

answered Sep 01 '14 at 08:50

ngergo6

267
1
11

score 0 · Answer 2 · answered Sep 01 '14 at 08:48

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).

score 0 · Answer 3 · edited May 23 '17 at 10:26

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()

Animate div when hovering over another div

3 Answers3