hover needs to happen for specific container instead of both

Question

Here's the fiddle: http://jsfiddle.net/sarvagnya1/ECj4V/

Jquery code:

  $(".container").hover(function(){
    $(".circle-hide").animate({height: '0px'});
    },function(){
   $(".circle-hide").animate({height: '95px'});
  });

There are two main containers, when I hover on one of them the function acts on both the containers. What changes should be made so that only the container on which the hover happens the animate effect takes place.

Answer 1

You have to use this and hover needs to happen on circle-cont instead of container.

  $(".circle-cont").hover(function(){
    $(this).find(".circle-hide").animate({height: '0px'});
    },function(){
    $(this).find(".circle-hide").animate({height: '95px'});
  });

JSFIDDLE DEMO