Jquery 添加/删除类转换不起作用

我有一份由“ul”列表制作的菜单。我有两个悬停风格和正常的类。我想在mouseover上设置这两个类之间的转换动画

我有这个html：

<ul class="mainNav">
                <li><a href="#">Home</a></li>
                <li><a href="#">Store</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Your Account</a></li>
                <li><a href="#">Contact</a></li>
</ul>

悬停效果正常，但没有过渡。为什么不呢？

我认为您使用的是标准jQuery API中的和

对于UI版本，您需要参考jQueryUIAPI

---

--使用UIAPI参考jQueryUI1.10.1可以很好地工作

---

我下载了1.10.1版本的效果，并将其添加到上面的演示中。
演示使用的是与您完全相同的版本，并且一切正常。当jQueryUI开箱即用时，您还遇到一些其他本地化问题

可能您正在引用的其他API或插件正在覆盖

$.ui

或类似内容

演示使用的是原样代码和jQuery 1.9.1+jQuery UI 1.10.1原样：

$('.mainNav li:not(:last-child)').hover(function () {
    $(this).addClass("forHover", 3000);
    return false;
}, function () {
    $(this).removeClass("forHover", 3000);
    return false;
});

编辑

我查看了你正在链接的网站，即使使用了你的

forHover

CSS，它在最新的Chrome、Firefox和IE10中仍然有效

我无法完全看到和理解文件中所有其他JavaScript试图做什么，但我不得不猜测，在那里的某个地方，您正在对那些菜单项执行某些操作，以某种方式抵消动画效果

---

-使用实际forHover中的CSS

---

编辑

我现在明白发生了什么。使用开发工具，您可以在选择

li

时看到，当将鼠标悬停在菜单项上时，会应用

forHover

，但会立即被

.mainNav li.notHover{

样式覆盖！因此，

forHover

中的所有样式都会被删除

你的CSS冲突了

一个肮脏的快速修复方法是将

！important

添加到

for hover

样式中，这应该可以使它们正常工作，但这是一个肮脏的修复方法

最好将CSS从

.mainNav li、.notHover{

分配给just

.notHover

，默认情况下将

notHover

分配给

li

元素，然后使用jQuery UI的

switchClass

，类似于此（下面的代码未经测试，但语法应该正确）：

---

不能使用jQueryUI的效果方法设置背景图像的动画

并非所有样式都可以设置动画。例如，无法设置背景图像的动画。任何无法设置动画的样式都将在动画结束时更改

---

从

console.log（$.ui）

中可以得到什么注意：在当前代码中，您没有使用

notHover

您可以使用CSS3转换进行悬停states@Horen您可以使用jqueryui:Object{version:“1.10.1”，keyCode:Object，ie:false，plugin:Object，hasScroll:function…}@KevinB真是太棒了-他不知道。他正在引用它，请参阅注释。@kraYz:请参阅更新的答案。我更新了演示，使用jQuery 1.9.1和jQuery UI 1.10.1，与您在问题中指定的版本相匹配，并且似乎工作得很好。看到您甚至无法使用jQuery UI 1.9.2，您就有了一个更本地化的问题。可能有些问题其他的东西可能会覆盖你的jQuery UI引用。所有版本在JSFIDLE中都可以正常工作。@kraYz:还有其他东西干扰了你的动画。即使我在webkit CSS中使用你的

forHover

样式，它在最新的Chrome、IE10和最新的FireFox中仍然可以工作。IE9在动画上很疯狂，但在动画中仍然有点像动画某种程度上。@KevinB：是的，你是对的。我在上面的

kraYz

链接到实际页面的链接中看到了它。我检查了jQuery UI文件，并定义并包含了

addClass:

函数。它应该可以设置背景颜色的动画。我试着从网站上查看

.js

文件，但我看不到它的哪一部分脚本干扰了动画。@kraYz:请看我的最新编辑，您的CSS冲突。

.mainNav li，.notHover{

CSS in style.CSS第43行覆盖了style.CSS第51行中的

forHover

的效果。基本上，当鼠标悬停在菜单项上时，会添加

forHover

，但会被应用于

.mainNav li

的样式覆盖。快速修复：将

！important

添加到

forHover

CSS中，它应该可以正常工作，但不会出现问题这是一个肮脏的安排。

$('.mainNav li:not(:last-child)').hover(function () {
    $(this).addClass("forHover", 3000);
    return false;
}, function () {
    $(this).removeClass("forHover", 3000);
    return false;
});

$('.mainNav li:not(:last-child)').hover(function () {
    $(this).switchClass("notHover", "forHover", 3000);
    return false;
}, function () {
    $(this).switchClass("forHover", "notHover", 3000);
    return false;
});