JQuery adding active class to classes of same name
<p>I have two identical cases of the divs below.</p>

<pre><code>&lt;div class="box"&gt;
  &lt;div class="content"&gt;
    Content here
  &lt;/div&gt; 
  &lt;div class="info"&gt;
    Text here
  &lt;/div&gt; 
&lt;/div&gt;
</code></pre>

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

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

<p>I came up with this solution</p>

<pre><code>$(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");
    }); 
});
</code></pre>

<p>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. </p>

<p>Is this a good solution or are there better and more "correct" ways to do this?</p>
