Question

我说到我必须向社区提出这个问题。我现在有这个网站： http://gyazo.com/e8f8e9884c3d40dee003c2234c840d56

正如你在菜单栏中看到的那样，Home下面有一个边框。我想用来实现的目标是，每当我悬停任何其他菜单项时，边框会慢慢淡出，当鼠标离开时它会淡出。

我目前的JQuery代码：

$("li").mouseenter(function(){
        $(this).fadeIn('slow').addClass("current");
    });
    $("li").mouseleave(function(){
        $(this).fadeIn('slow').removeClass("current", 600);
    });

当前类是添加边框的类。

任何人都有一些提示吗？

谢谢！

Answer 1

您也可以使用css transitions代替

ul li {
  float: left;
  margin-right: 10px;
  list-style: none;
  border-bottom: 1px solid transparent;
  transition: border-bottom 2s ease;
}
ul li:hover {
  border-color: #aaa;
}

<ul>
  <li>Home</li>
  <li>Contact</li>
</ul>

Answer 2

你不能将两个参数传递给＆＃39; removeClass＆＃39; jquery中的函数。

您可以在＆＃39; removeClass＆＃39;上查看他们的文档。如果要删除多个类，则必须使用每个className之间的空格在一个参数中发送它。

如果要在淡入淡出效果完成后删除该类，则只需在其回调中调用removeClass函数。（供参考阅读fadein https://api.jquery.com/fadeIn/）

的文档

 $("li").mouseenter(function(){
var self = this;
            $(self).fadeIn('slow',function() {
self.addClass('current');
});
        });
        $("li").mouseleave(function(){
           var self = this;
            $(self).fadeOut('slow',function() {
self.removeClass('current');
});
        });
        });

或者如果你想在一段时间之后，让我们假设1000毫秒/ 1秒，那么代码将是：

$("li").mouseenter(function(){
    var self = this;
                $(self).fadeIn(1000,function() {
    self.addClass('current');
    });
            });
            $("li").mouseleave(function(){
               var self = this;
                $(self).fadeOut(1000,function() {
    self.removeClass('current');
    });
            });
            });

JQuery：FadeIn一个addclass？

2 个答案: