1

我有一个由“ul”列表制作的菜单。我有 2 个悬停样式和普通类。我想在鼠标悬停时为这两个类之间的过渡设置动画。

我有这个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>

课程：

forHover, notHover

jQuery 1.9.1 ; 用户界面 1.10.1

jQuery代码：

$('.mainNav li:not(:last-child)').hover(function(){

    $(this).addClass("forHover",3000);
    return false;
},function(){

    $(this).removeClass("forHover",3000);
    return false;

});

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

4

2 回答 2

2

我认为您正在使用标准 jQuery API 中的addClass和removeClass。

您需要参考 UI 版本的 jQuery UI API。

DEMO -- 使用 UI API 参考 jQuery UI 1.10.1 工作正常

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

也许您引用的其他 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;
});

编辑

我检查了你正在链接的网站，即使在使用了你的确切forHoverCSS 之后，它仍然可以在最新的 Chrome、Firefox 和 IE10 中运行。

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

演示- 使用实际 forHover 中的 CSS

编辑

我现在看到正在发生的事情。使用开发人员工具，您可以在选择将li鼠标悬停在菜单项上时看到，forHover但会立即被您的.mainNav li, .notHover {样式覆盖！因此，所有样式forHover都被删除了。

您的 CSS 发生冲突！

一个肮脏的快速修复正在添加!important到forHover样式中，这应该使它们工作，但它是一个肮脏的修复。

最好将 CSS分配.mainNav li, .notHover {给 just .notHover，默认分配notHover给li元素，然后使用 jQuery UI switchClass，类似于此（下面的代码未经测试，但语法应该是正确的）：

$('.mainNav li:not(:last-child)').hover(function () {
    $(this).switchClass("notHover", "forHover", 3000);
    return false;
}, function () {
    $(this).switchClass("forHover", "notHover", 3000);
    return false;
});
于 2013-03-07T22:56:23.260 回答
0

您不能使用 jQuery UI 的效果方法为背景图像设置动画。

http://api.jqueryui.com/addClass/

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

于 2013-03-07T23:11:26.667 回答