Question

嘿所有我正在尽我所能找到一种方法，当用鼠标盘旋时，将其周围的其他选项调暗，并缩放（提前）鼠标当前所在的悬停项目。

我的代码可以在这里找到＆gt; 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

Answer 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);
});

jQuery突出显示/放大悬停项目和昏暗其他项目

1 个答案: