Question

我有这段代码

<ul class="nav sub_nav_home">
    <li id="sub_nav_home1"><a href="#"><span>LINK1</span></a></li>
    <li id="sub_nav_home2"><a href="#"><span>LINK2</span></a></li>
    <li id="sub_nav_home3"><a href="#"><span>LINK3</span></a></li>
</ul>

$("ul.sub_nav_home li").hover(function() {
    $(this).removeClass("current").fadeOut();
});

这似乎没有显示我追求的动画。这样做是为了让“li”完全消失。

基本上我需要的是删除具有淡出效果的“current”类，然后将其添加到下一个“li”并且效果淡出

由于

Answer 1

不确定你是否可以使用直接jQuery执行此操作，但我知道jQuery UI有一个修改过的removeClass（），它允许你添加一个持续时间来删除类 jQuery UI Docs

Answer 2

你不能从一个班级淡化到另一个班级。你必须告诉jQuery在.animate（）方法中要设置动画的属性。

要获取下一个li元素，请使用.next（）。

Answer 3

AFAIK我认为你不能将fadeOut（）添加到removeClass（）。如果我错了，有人会纠正我！

Answer 4

是的，你可以用一些CSS3来做到这一点。

您只需将以下内容添加到.current。

.current{
    color: #f00;
    background-color: #000;
    transition: color 0.5s, background-color 0.5s;
    -webkit-transition: color 0.5s, background-color 0.5s; /* Safari */
}

显然，您需要将颜色/背景颜色更改为您要设置动画的属性。否则，Cubed Eye建议包含JqueryUI非常棒，因为jQueryUI中的removeClass会为你完成所有这些......

removeClass和淡入淡出动画

4 个答案: