2

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

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);

（小提琴）

但是，它不起作用。如果我添加一个函数作为.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>
4

5 回答 5

3

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

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

http://jsfiddle.net/Z4xf9/

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

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

祝你好运！

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

于 2012-12-07T10:45:42.547 回答
2

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

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

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

于 2012-12-07T11:40:26.320 回答
2

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

参考jQuery UI 颜色动画

于 2012-12-07T10:32:01.530 回答
1

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

于 2012-12-07T10:46:48.443 回答
1

一旦你在 Fiddle 上解决了这个 TypeError，它就会起作用：

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

删除几条 jQuery 行后对我有用：

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

于 2012-12-07T10:57:59.073 回答