Question

The script below works perfectly. However, it’s not quite what I’m trying to achieve. I’d like to have ‘on hover’ it to pick 1 color and stay on it instead of cycling through all the colors per link on hover. You can see the example of the effect I don’t want here http://www.morxmedia.com/

$(document).ready(function() {
  original = $('.menu-item a').css('color');
  $('.menu-item a').hover(function() { //mouseover
    var rand = Math.floor(Math.random() * 4);
 if(rand == 0){var col = '#EAD325';}
 else if(rand == 1){var col = '#FE902F';}
 else if(rand == 2){var col = '#82BE38';}
 else if(rand == 3){var col = '#217AFC';}
 else{var col = '#888888';}

    $(this).animate({'color': col,});
  },function() { //mouseout
    $(this).animate({
      'color': original,
    });
  });
});

Answer 1

Generates a random color for each link, saves it into an array. On hover it checks what color it should be, and animates to it.

See working example: http://jsfiddle.net/fRqj2/

$(document).ready(function() {

    var assignedColors = new Array();

    $('.menu-item a').each(function(i) {
        var rand = Math.floor(Math.random() * 4);
        if (rand == 0) {
            var col = '#EAD325';
        }
        else if (rand == 1) {
            var col = '#FE902F';
        }
        else if (rand == 2) {
            var col = '#82BE38';
        }
        else if (rand == 3) {
            var col = '#217AFC';
        }
        else {
            var col = '#888888';
        }
        assignedColors[i] = col;
    });

    original = $('.menu-item a').css('color');
    $('.menu-item a').hover(function() { //mouseover
        index = $(this).parent().prevAll().length;
        $(this).animate({
            'color': assignedColors[index]
        });
    }, function() { //mouseout
        $(this).animate({
            'color': original,
        });
    });
});