Question

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

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的第3个参数来记录完成，它永远不会被调用。但是，如果我使用.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>

Answer 1

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

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

http://jsfiddle.net/Z4xf9/

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

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

祝你好运！

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

Answer 2

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

参考jQuery UI color Animation

Answer 3

这个问题有两方面：正如许多人提到的那样，一个问题是我需要jquery-ui才能让动画处理这些属性。第二个问题是li元素最初没有border属性。我添加了

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

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

Answer 4

如果要为颜色样式设置动画，则需要包含jQuery UI。香草动画（）用于更基本的东西;基本上任何通过CSS控制的整数值（位置，不透明度，高度，宽度等 - 但不是颜色。你需要一个单独的插件，或jQuery UI）。

Answer 5

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

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

删除后，几条jQuery行适合我：

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

jQuery .animate（）无效，但.css（）可以

5 个答案: