javascript - jQuery toggleClass fade 适用于一个类，而不适用于另一个类？

Question

我希望我的 i 元素在悬停时丢失 outline 类，但由于某种原因，这不起作用。该类丢失并立即再次添加，没有淡入淡出/延迟。如果我用 background 类尝试这个完全相同的代码，那么它确实有效。我在这里没有看到什么？

第二个问题是，当我尝试使用 background 类时，背景会在淡入淡出的持续时间内(在本例中为 500 毫秒)停留在那里，然后立即消失。这也应该是淡出，如淡出。

谢谢!

JSFiddle

$('nav a').hover(function(){
  if (!$(this).find("i").hasClass("home")){
    $(this).find('i').toggleClass('outline', 500);
    }
})

Answer 1

.hover() 可以传递 2 个函数作为参数。第一个类似于 .mouseover()，第二个类似于 .mouseout()

$('nav a').hover(function() {
  $(this).find('.home').removeClass('outline');
}, function() {
  $('.home').addClass('outline');
})

更新

你可以在没有 Javascript 的情况下添加淡入淡出效果，只用 css:

nav {
    font-size: 20 px;
}
nav a {
    padding-left: 30 px;
}
nav a i {
    position: absolute;
    left: 0;
}
nav a i.star: not(.outline) {
    opacity: 0;
    transition: opacity 300 ms ease;
}
nav a: hover.star: not(.outline) {
    opacity: 1;
    transition: opacity 300 ms ease;
}

Demo here.