Reputation: 23921

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

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>

Upvotes: 2

Answers (5)

Tamás Szelei

Reputation: 23921

The issue was two-fold: one problem was, as many people mentioned, that I need jquery-ui for the animations to work on these properties. The second issue was that the li elements originally did not have a border property. I added

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

To the CSS and now it works as it should (and this is what was different in the fiddle).

Upvotes: 2

Tomas Ramirez Sarduy

Reputation: 17471

It works once you resolve this TypeError on Fiddle:

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

After deleted few jQuery lines works for me:

Fiddle: http://jsfiddle.net/6xDkF/5/

Upvotes: 1

MassivePenguin

Reputation: 3711

You need to include jQuery UI if you want to animate colour styles. The vanilla animate() is used for more basic things; basically anything that's controlled via CSS through integer values (position, opacity, height, width etc. - but not colour. You need a separate plugin for that, or jQuery UI).

Upvotes: 1

Michael Giovanni Pumo

Reputation: 14774

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.

Upvotes: 3

Murali Murugesan

Reputation: 22619

I think if you want to do color animation you need to include jQuery UI.

Refer jQuery UI color Animation

Upvotes: 2

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

Answers (5)

Related Questions