jQuery highlight/zoom in hovered item and dim others

Question

Hey all i am trying my best to find a way to, when hovered on with the mouse, dim the other options around it and also to zoom (bring forward) the hovered item the mouse is currently on.

My code can be found here > Code link

I have the fading items that are not selected working just fine... just need help with the zooming in of the hovered item!

The code i currently have for the zoom effect is terrible and does not work at all....

$('.category-container').bind('mouseover',function() {
    $(this).addClass('hover').stop(true,true);
    $('.category-container').not('.hover').stop(true,true).fadeTo('fast',0.2).animate({
    width: '2em',
    height: '2em',
}, 200);

});
$('.category-container').bind('mouseout',function() {
    $('.category-container').removeClass('hover').stop(true,true).fadeTo('fast',1);
});​

Any help would be great!

UPDATE

I got it working with the effect that i would like... just doesnt seem to fade in the item if you move off one to another without first letting the list fade in first: new code

Answer 1

Change the last line in your mouseover code to fade out all of the elements, but then follow it with a fadeTo of the element that is hovered over. Your code was getting confused about what element was being hovered over, so it is better to explicitly use $(this):

$('.category-container').bind('mouseover',function() {
    $(this).addClass('hover').stop(true,true).animate({
        fontSize: '26px',
    }, 200);
    // This line changed
    $('.category-container').stop(true,true).fadeTo('fast',0.2);  
    // This line added
    $(this).fadeTo('fast',1);    
});

$('.category-container').bind('mouseleave', function() {
    $('.category-container').removeClass('hover').stop(true,true).animate({
        fontSize: '12px',
    }, 200).fadeTo('fast',1);
});
​