jQuery 用户界面 : - Switch Class but add a hover effect?

Question

我有以下 jQuery 代码，当您将鼠标悬停在“li”上时，将类添加到“li”内的“p”标签...但是我如何通过添加过渡效果而不是直接切换来使这变得更有趣？

代码:

$(document).ready(function() {
    $('li').hover(function() {
        $('p', this).toggleClass('hovered');
    });
});

Answer 1

检查animate函数，您可以为两个类之间的转换设置动画。

编辑:抱歉，方法错误。您正在寻找的是 switchClass方法。

这是一个demo switchClass 的。如果您有两个类(class)，并且想要从一个类(class)切换到另一个类(class)，那么它会很有用。如果您只想添加/删除单个类，请参阅 Wouter J 的回答。

更新:看来您需要两个类(class)才能实现此目的。另请注意，switchClass 需要 jQuery UI 才能工作。这是一个例子:

HTML:

<li>
    <p class="regular">Test</p>
</li>

CSS:

p.regular { color:red }
p.hovered { color:blue }

JavaScript:

$(document).ready(function() {
    $('li').hover(function() {
        $('p', this).switchClass('regular','hovered', 2000);
    },function() {
        $('p', this).switchClass('hovered','regular', 2000);
    });
});