jQuery .animate() not working, but .css() does

Question

I'm trying to create a mouseover animation using this code:

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)

However, it doesn't work. If I add a function as the 3rd parameter of .animate to log the completion, it never gets called. But if I use .css in place of .animate, it does work, so the selector is correct. What could cause this problem?

Edit:

This is the 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

You may need jQuery UI to adjust certain properties.

Check out my example based on your code:

http://jsfiddle.net/Z4xf9/

I improved your code a little in places, hopefully it's more clearer now. I prefer to use the new "on" event handler with mouseenter and mouseleave.

I accentuated the border size and colour to make the change more obvious.

Good luck!

EDIT: I wasn't sure what menu.colors[$(this).index() was, so I left it out and replaced it with a simple string colour keyword...but you can swap this out easy enough.