Wrong count value with mouseenter/mouseover event

Wrong count value with mouseenter/mouseover event

Hello!

I'm a newbie in JQuery, so my problem may be no big deal but anyway I'm stucked with this for a few days so I'm asking the help of any nice person who could solve it!

Here is the thing: I'm working on a partners page where partners are categorized, each category contains a various number of partners's logos, so I had to define different min and max_height for each category, so that it can enlarge/reduce when mouse is over/out the div.

The problem is that I use a for loop which increment $id_cat each time it's looped, the value of $id_cat is correct when I test it with alert(count); OUT of mouseenter or mouseleave events, but wrong when I test it IN mouseenter or mouseleave (it returns the max value of count var no matter what I try...), so the script doesn't work fine, as I'm using this count to get the corresponding max_height and min_height values from an array (cat_height).

Here is the code:
  1. cat_height = new Array('70 115','70 115','140 230','140 230','140 230');
  2. $(document).ready(function(){
  3.   for (var $id_cat=0;$id_cat<=4;$id_cat++)
  4.   {   
  5.    currentcat = $('#cat-'+$id_cat);
  6.    count = $id_cat;
  7.    _height = cat_height[count].split(' ');
  8.    min_height = _height[0];
  9.    max_height = _height[1];  
  10.    currentcat.mouseenter(function(){
  11.     alert(count);                             
  12.     $(this).animate({height: max_height}, 300);
  13.    }).mouseleave(function(){
  14.     $(this).animate({height: min_height}, 300);
  15.    });
  16.   }
  17. });
So my problem is situated between lines 10 and 15.

Can anybody tell me what's wrong and if there's a way to properly get my count value within these mouseenter and mouseleave events?

Thank you for interest and future help if there's any.