jQuery高亮/放大悬停的项目并使其他项目变暗答案

【问题标题】：jQuery highlight/zoom in hovered item and dim othersjQuery高亮/放大悬停的项目并使其他项目变暗
【发布时间】：2012-12-02 20:55:12
【问题描述】：

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

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

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

我目前用于缩放效果的代码很糟糕，根本不起作用....

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

任何帮助都会很棒！

更新

我得到了我想要的效果......如果您在没有先让列表淡入的情况下从一个移到另一个，似乎不会淡入该项目：new code

【问题讨论】：

当您说“缩放”时，您的意思是放大？你不能只添加 $('.hover').animate({width: //whatever});
是的，让它更加突出。
ol 会有一些 li 元素不是 a

标签： jquery mouseover zooming jquery-effects jquery-hover

【解决方案1】：

更改mouseover 代码中的最后一行以淡出所有元素，然后在其后面加上悬停元素的fadeTo。您的代码对悬停在哪个元素上感到困惑，因此最好明确使用$(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);
});

【讨论】：