0

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

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

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

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

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

任何帮助都会很棒！

更新

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

4

1 回答 1

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);
});
​
于 2012-12-02T22:18:07.493 回答