javascript - 悬停功能有效时无法添加类

Question

我想做什么

我有一个列表 (ul#portfoliolist)，其中每个元素都是不同的导航元素。

当用户将鼠标悬停在任何元素上时，不透明度从 0.65 变为 1，右填充从 0 变为 10 像素。当用户将鼠标移开时，这些会反转:

$('ul#portfoliolist>li:not(.active)').hover(function(){
    $(this).stop().animate({paddingRight:'10px',opacity:1},100);
},function(){
    $(this).stop().animate({paddingRight:0,opacity:0.65},300);
})

如果用户单击列表项，它会从任何其他列表项中删除类 active 并将类 active 添加到被单击的元素:

$('ul#portfoliolist>li').click(function(){
    $('ul#portfoliolist>li').removeClass('active');
    $(this).addClass('active');

    //var item = $(this).attr('data-portfolio');
    //$('div.portfolio').css({backgroundImage:'url(img/portfolio_'+item+'.png)'})
})

我遇到的问题

虽然这两个功能单独使用时效果很好，但将它们结合使用时我无法同时做到这两个功能 - 只有悬停效果是成功的。

当我将鼠标悬停在上面时，所需的动画会起作用，但是当我将光标移开时，会出现辅助悬停功能并覆盖 .active CSS。

如何使 click 函数优先于 hover 函数的 mouseout 部分？

Answer 1

$('ul#portfoliolist>li:not(.active)').hover(function(){
    $(this).stop().animate({paddingRight:'10px',opacity:1},100);
},function(){
    if($this).hasClass('active'){
        return;
    }
    $(this).stop().animate({paddingRight:0,opacity:0.65},300);
})