Question

I have two identical cases of the divs below.

<div class="box">
  <div class="content">
    Content here
  </div> 
  <div class="info">
    Text here
  </div> 
</div>

.info is hidden with overflow: hidden and when I hover over .box, .info .animates up and contains some info about .content.

But since i have the same classnames when i hover over one of .box, .info on both of them .animates.

I came up with this solution

$(document).ready(function(){
    $('.box').mouseover(function(){
        $(this).find(".info").addClass("active");
    });

    $('.box').hover(function(){
        $('.active').animate({bottom: "0px"}, {queue: false, duration: 100})
    }, function(){
        $('.active').animate({bottom: "-50px"}, {queue: false, duration: 100});
    }); 

    $('.box').mouseout(function(){
        $(this).find(".info").removeClass("active");
    }); 
});

I tried to use a hover first to add and remove class but then the active class got removed before the .hover on .animate and .info didn’t animate down.

Is this a good solution or are there better and more “correct” ways to do this?

Answer 1

You should be able to do something along these lines.

$('.box').hover(function(){
    $(this).find('.info').animate({bottom: "0px"}, {queue: false, duration: 100})
}, function(){
    $(this).find('.info').animate({bottom: "-50px"}, {queue: false, duration: 100});
}); 

If you give us your css, I could get a working jsfiddle as an example.