jQuery高亮显示/放大悬停项并使其他项变暗

嘿，我正在尽我最大的努力找到一种方法，当鼠标悬停时，使其周围的其他选项变暗，并缩放（向前）鼠标当前悬停的项目

我的代码可以在这里找到>

我有没有选择的淡入淡出的项目工作得很好。。。只需要帮助放大悬停的项目

我目前拥有的缩放效果代码非常糟糕，根本不起作用

$('.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);
});​

任何帮助都会很好

更新

---

我让它工作的效果，我想。。。如果你不先让列表淡入，而是一个一个地移动到另一个，则该项似乎不会淡入：将

鼠标上方的最后一行更改为淡出所有元素，然后使用悬停元素的
淡入。您的代码对悬停在上面的元素感到困惑，因此最好显式使用
$（this）
：

当你说“缩放”时，你的意思是放大？你不能直接添加$（'.hover'）.animate（{width://whatever}）；是的，让它更加突出。ol会有一些li元素，而不是a元素
$('.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);
});
​