jQuery .animate() 不起作用，但 .css() 可以答案

【问题标题】：jQuery .animate() not working, but .css() doesjQuery .animate() 不起作用，但 .css() 可以
【发布时间】：2012-12-07 10:27:23
【问题描述】：

我正在尝试使用以下代码创建鼠标悬停动画：

var menu = {
    colors: [ '#B8410D', '#1C70A8', '#27A328', '#B59215' ],

    alignMenuLeft: function() {
        var slider_div = jQuery('#slider-1');
        var menu_div = jQuery('#dupl-menu');
        var offset = slider_div.offset();

        menu_div.css({
            'top': offset.top,
            'left': offset.left + slider_div.width() - menu_div.width()
        });
    }
}

jQuery(document).ready(function($) {
    $('#slider-1').nivoSlider({
        effect: 'fade',
        animSpeed: 500,
        pauseTime: 4000,
        controlNav: false,
        captionOpacity: 0,
        directionNav: false,

        afterLoad: menu.alignMenuLeft
    });

    $('#dupl-menu .menu-item').mouseover(function() {
        console.log('mouseover');
        $(this)
            .stop()
            .animate({
                    borderRightColor: menu.colors[$(this).index()],
                    borderRightWidth: '6px',
                    borderRightStyle: 'solid'
                },
                { queue: false, duration: 600 });
    });

});

jQuery(window).resize(menu.alignMenuLeft);

(fiddle)

但是，它不起作用。如果我添加一个函数作为.animate 的第三个参数来记录完成，它永远不会被调用。但是如果我使用.css 代替.animate，它确实有效，所以选择器是正确的。什么可能导致这个问题？

编辑：

这是 HTML：

<div id="dupl-menu">
    <div class="menu-main-container">
        <ul id="menu-main" class="menu">
            <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-50"><a href="#item1">item1</a></li>
            <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-51"><a href="#item2">item2</a></li>
            <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-52"><a href="#item3">item3</a></li>
            <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-53"><a href="#item4">item4</a></li>
        </ul>
    </div>      
</div>

【问题讨论】：

你能做一个小提琴吗？
你也可以发布html
您确定这个menu.colors[$(this).index()] 有效吗？将其记录到控制台。
为我工作 -> FIDDLE
首先，使用Chrome或Firefox打开控制台（F12），看看控制台是否有明显的错误提示。

标签： jquery html animation jquery-animate

【解决方案1】：

您可能需要 jQuery UI 来调整某些属性。

根据您的代码查看我的示例：

http://jsfiddle.net/Z4xf9/

我对您的代码进行了一些改进，希望现在更清晰。我更喜欢将新的"on" 事件处理程序与mouseenter 和mouseleave 一起使用。

我强调了边框的大小和颜色，使变化更加明显。

祝你好运！

编辑：我不确定menu.colors[$(this).index() 是什么，所以我把它留了下来，用一个简单的字符串颜色关键字替换了它……但你可以很容易地把它换掉。

【讨论】：

我已经包含了这样的 jquery UI：<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js?ver=3‌.4.2'></script>。它仍然不起作用，但无论如何我都可以为宽度属性设置动画，所以我想这将是根本原因。如何确保已加载？ jQuery.ui 已经定义好了，但是还是不行。
如果您在 jQuery 中使用 Document ready，那么应该可以。 docs.jquery.com/… 。另外，脚本文件的顺序应该是：1. jQuery 核心 2. jQuery UI 3. 你的 jQuery 代码。
我遇到了同样的问题，我需要 JQuery UI

【解决方案2】：

我认为如果你想做彩色动画，你需要包含 jQuery UI。

参考jQuery UI color Animation

【讨论】：

jQuery 1.7.2 需要哪个 jquery-ui 版本？
任何最新版本和依赖的最新 jQuery.js 版本。截至目前，jQuery UI 是 1.9.2，jQuery 是 1.8.3

【解决方案3】：

问题有两个方面：一个问题是，正如许多人所提到的，我需要 jquery-ui 来让动画处理这些属性。第二个问题是 li 元素原本没有边框属性。我加了

#dupl-menu .menu-item {
  border-right: 0 solid white;
}

到 CSS，现在它可以正常工作了（这就是小提琴的不同之处）。

【讨论】：

【解决方案4】：

如果你想要动画颜色样式，你需要包含 jQuery UI。 vanilla animate() 用于更基本的事情；基本上任何通过整数值通过 CSS 控制的东西（位置、不透明度、高度、宽度等 - 但不是颜色。你需要一个单独的插件或 jQuery UI）。

【讨论】：

我已经包含了这样的 jquery UI：<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js?ver=3.4.2'></script>。它仍然不起作用，但无论如何我都可以为 width 属性设置动画，所以我想这将是根本原因。如何确保已加载？ jQuery.ui 已定义，但仍然不起作用。
尝试运行 jQuery UI 的本地副本而不是链接库，看看是否能解决问题。页面应该在运行任何函数之前下载所有库，所以我怀疑这是原因......

【解决方案5】：

一旦你在 Fiddle 上解决了这个 TypeError，它就可以工作了：

Uncaught TypeError: Object [object Object] has no method 'nivoSlider'

删除几行 jQuery 后对我有用：

小提琴： http://jsfiddle.net/6xDkF/5/

【讨论】：