Color cycling some elements' css properties with jQuery, :hover gets stuck and erratic

Question

I'm color cycling through the color, background-color and border-color css properties of some elements with the help of jQuery and this little plugin .

I'm doing this:

var currentColor = myRandNumber; // I get this variable from the main page
var myWebColors = [ '#49aea2', '#5da270', '#a1b144', '#ceb33d', '#ce812d',
'#c44e4e', '#ac4275', '#705f91', '#4d6791', '#5199a4' ];

window.setInterval( animateColor, 2000 ); // not using requestAnimationFrame
                                          // for browser compatibility

function animateColor() {

    $(".new-project-header, .button a:active,
    #logo, ul#menu-main-nav li a:active, ul#menu-main-nav li.contact a,
    ul#menu-main-nav li.contact a:visited, .footer-twitter,
    .footer-mail").animate(
        {
            backgroundColor: myWebColors[currentColor]
        }, "slow");

    $("a:hover, p a:hover, ul#menu-main-nav li.contact a:hover,
    h3.portfolio-item-title a:hover").animate(
        {
            color: myWebColors[currentColor]
        }, "slow");

    $("p a, p a:visited").animate(
        {
            borderColor: myWebColors[currentColor]
        }, "slow");

    if (currentColor == 9) { // the following cycles through the array
                             // in an endless loop
        currentColor = 0;
    } else {
        currentColor++;
    }
}

EDIT: jsfiddle HERE !

The problem I'm having is that when I hover over pa , while jQuery does the color cycling just fine, but once I mouseout the link will stay at its :hover state, with the latest color it cycled into.

It's even worse when I hover over ul#menu-main-nav li . It'll change the a:hover color , when that should only be applied to ul#menu-main-nav li.contact . It's like this latter selector :hover state is taking precedence over the css of the former.

Maybe I should do everything manually with on events? Maybe I should 'reset' all non- :hover states at the end of each loop step? Maybe all of this is overkill and I should try a different approach?

Thanks!

Answer 1

You need to change the state back to default when the mouse exits the element. Ie hover completes.

JQuery hover can do this easily.

$( "a" ).hover(
  function() {
    $( this ).animate({  color: myWebColors[currentColor] }, "slow");
  }, function() {
        $( this ).animate({  color: default_color }, "slow");
  }
);

Just out of curiosity, why wouldn't you use CSS:hover property as explained here http://www.w3schools.com/cssref/sel_hover.asp ?

Answer 2

First, you have a loop ( setInterval() ) that is running even if you didn't hover anything. It is useless.

So, i make an update of your Fiddle with setTimeout() . You can start from something like this. I also replaced :hover statments by event handlers. I don't know if it is ok for you. But this is how I should have done it. Hope it'll help.