Hello,
I have this script that will start a little animation. I have 3 different div's where I want this effect to happen if that div is hover. So if you hover over number 2 only number 2 will do the effect. At the moment if you have 1,2 or 3 they will all do the animation. So how can I make this work that it only will happen with the one you hover?
I can solve it with giving every div a different number, but than I have to write the javascript part 3 times, I think you can do it easier.
So how do I change this script, so it will only play the animation if you hover over that specific div.

HTML Code:
		<div class="menuApp" style="background-color:rgb(125,255,0);font-size:50px;">
		<div class="menuAppHover">Catagories</div>
		</div>
		
		<div class="menuApp" style="background-color:rgb(255,50,240);font-size:40px;">
		<div class="menuAppHover">Catagories</div>
		</div>
		
		<div class="menuApp" style="background-color:rgb(235,30,15);font-size:50px;">
		<div class="menuAppHover">Catagories</div>
HTML Code:
$(".menuApp").hover(function () 
{
  $(".menuAppHover").animate(
  {
  'margin-top' : '-25px'
  },500);
},function () 
{
  $(".menuAppHover").animate(
  {
  'margin-top' : '0px'
  },200);
}
);


$(".menuAppHover").hover(function () 
{
  $(".menuAppHover").animate(
  {
  'margin-top' : '-200px',
  'border-top-left-radius' : '35px',
  '-moz-border-top-left-radius' : '35px',
  'border-bottom-right-radius' : '35px',
  '-moz-border-bottom-right-radius' : '35px'
  },500, function ()
  {
  $(".menuAppHover").css("position","relative");
  });
},function () 
{
  $(".menuAppHover").css("position","static");
  $(".menuAppHover").animate(
  {
  'margin-top' : '0px',
  'border-top-left-radius' : '0px',
  '-moz-border-top-left-radius' : '0px',
  'border-bottom-right-radius' : '0px',
  '-moz-border-bottom-right-radius' : '0px'
  },200);
}
);